How to set the Webpack project root?

#explainlikeimfive

I've only recently started using WebPack. (with Typescript, which I've been using for a long time, and Preact since recently.)

I'm really happy with it so far - it's working great, both during development, and when building the production assets.

My question here is actually simple: how is a webpack project rooted? It doesn't seem to automatically root itself neither from the locations of the package.json or webpack.config.json files, and I can't find an option to root it.

I have a project with the following structure:

root/
  package.json
  styleguide/
    webpack.config.js
    styleguide.tsx
    tsconfig.json

I have other sub-projects besides styleguide in this project - that one happens to use webpack, others use e.g. tsc or node-sass etc., is why it's structured like this.

My webpack configuration looks like this:

const path = require("path");
const webpack = require("webpack");

module.exports = {
    entry: {
        "styleguide-deps": ["prismjs", "preact", "js-beautify"],
        "styleguide": "./styleguide.tsx"
    },

    output: {
        filename: "[name].js",
        path: path.join(__dirname, "/../assets/demo/"),
        libraryTarget: "amd"
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "styleguide-deps",
            minChunks: Infinity,
        })
    ],

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    // Don't bundle these modules, but request them at runtime (client-side, via require.js)
    externals: {
        "kodus": "kodus"
    }
};

My package.json has a scripts entry like the following:

    "scripts": {
        "build-styleguide-ts": "cd styleguide && webpack",
    },

And the question I'm asking is, why do I have to cd into styleguide to run webpack?

I've tried e.g. webpack --config styleguide/webpack.config.json from the project root, and I can't get it to work.

I can use absolute paths in most places, but not for entry.styleguide, and it seems ./ works relative to the current directory, rather than to the project root.

My objection is that no script should ever rely on the current directory, as that's just global state, and I generally use absolute paths everywhere, but that hasn't worked for me with webpack.

How can I remove the dependency on the current directory?

Top comments (4)

Jess Lee • Feb 21 '18

👋 @thelarkinn

Nick Taylor • Mar 5 '18 • Edited

@mindplay , the reason you need to cd into your styleguide folder is because styleguide has your tsconfig.json and webpack.config.js in there. If you don't want the styleguide to be the root, simply move your tsconfig.json and webpack.config.js to your root folder. If for some reason you can't change that, simply call webpack with an explicit configuration file and point it to ./styleguide/webpack.config.js, e.g.

"scripts": {
      "build-styleguide-ts": "webpack --config ./styleguide/webpack.config.js",
},

I have a typescript preact boilerplate if you want to take a peek.

Hit me up if you're still stuck.

Rasmus Schultz • Mar 5 '18

I completely missed it, but here it is - it's called context... I must have look for this 20 times, and was expecting something like "rootDir", but - there it is :-)