DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Rasmus Schultz
Rasmus Schultz

Posted on

How to set the Webpack project root?

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
Enter fullscreen mode Exit fullscreen mode

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"
    }
};

Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

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)

Collapse
jess profile image
Jess Lee

πŸ‘‹ @thelarkinn

Collapse
nickytonline profile image
Nick Taylor • Edited on

@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.

Collapse
mindplay profile image
Rasmus Schultz Author

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 :-)

Collapse
thelarkinn profile image
Sean Larkin

webpack.js.org/configuration/context

Head to your account's Settings to...

🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content