Conditional build based on environment using Webpack

Question

I have some things for development - e.g mocks which I would like to not bloat my distributed build file with. In RequireJS you can pass a config in a plugin file and conditonally require things in based on that. For webpack there doesn't seem to be a way of doing this. Firstly to create a runtime config for an environment I have used resolve.alias to repoint a require depending on the environment, e.g: ``` // All settings. var all = { fish: 'salmon' }; // `envsettings` is an alias resolved at build time. module.exports = Object.assign(all, require('envsettings')); ``` Then when creating the webpack config I can dynamically assign which file `envsettings` points to (i.e. `webpackConfig.resolve.alias.envsettings = './' + env`). However I would like to do something like: ``` if (settings.mock) { // Short-circuit ajax calls. // Require in all the mock modules. } ``` But obviously I don't want to build in those mock files if the environment isn't mock. I could possibly manually repoint al…

Accepted Answer

You can use the define plugin.

I use it by doing something as simple as this in your webpack build file where `env` is the path to a file that exports an object of settings:

```
// Webpack build config
plugins: [
    new webpack.DefinePlugin({
        ENV: require(path.join(__dirname, './path-to-env-files/', env))
    })
]

// Settings file located at `path-to-env-files/dev.js`
module.exports = { debug: true };
```

and then this in your code

```
if (ENV.debug) {
    console.log('Yo!');
}
```

It will strip this code out of your build file if the condition is false. You can see a working Webpack build example here.

Conditional build based on environment using Webpack

Solution

Problem