Webpack: Different (Define Plugin) settings per entry point

Question

For some of my bundle files I would like to build different versions (for example one with admin functionality and one without).

It seems the DefinePlugin is usually used for this kind of thing, but there are also loaders like the if-loader or the ifdef-loader available.

Now the problem is that they all seem to share a configuration among all entry points. I would need a way to set a different configuration (like {with_admin_mode: true} and {with_admin_mode: false}) for the different entry points.

I though of putting the configuration at the top of the actual entry point JS files, but I don't know how to correctly create a global variable across all modules that will be detected as true == false and removed.

Answer 1

Sorry, I meant to write providePlugin, not definePlugin. DefinePlugin will replace the variable in your code directly and will not create a global.

You can use providePlugin to set a global config variable from a module file that you have created:

in your webpack config:

plugins: [
  new webpack.ProvidePlugin({
    'config': 'config'
  })
  ...
],
resolve: {
  alias: { 'config':  path.resolve(__dirname, './config') },
  extensions: ['.js']
}

and config will be set as a global to the exports of a config.js file.

You can then access and modify this global in your different entry points. For example, you could do config.with_admin_mode = true; in entry1.js and config.with_admin_mode = false; in entry2.js.

Another solution would be to set the global variable on the window directly from your modules, e.g. window.with_admin_mode = true;