Conditional build based on environment using Webpack

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 configplugins: [    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.

Not sure why the "webpack.DefinePlugin" answer is the top one everywhere for defining Environment based imports/requires.

The problem with that approach is that you are still delivering all those modules to the client -> check with webpack-bundle-analyezer for instance. And not reducing your bundle.js's size at all :)

So what really works well and much more logical is: NormalModuleReplacementPlugin

So rather than do a on_client conditional require -> just not include not needed files to the bundle in the first place

Hope that helps

Use ifdef-loader. In your source files you can do stuff like

/// #if ENV === 'production'console.log('production!');/// #endif

The relevant webpack configuration is

const preprocessor = {  ENV: process.env.NODE_ENV || 'development',};const ifdef_query = require('querystring').encode({ json: JSON.stringify(preprocessor) });const config = {  // ...  module: {    rules: [      // ...      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: `ifdef-loader?${ifdef_query}`,        },      },    ],  },  // ...};