CODEWITHSUNDEEP
webpack
AndreKR
AndreKR

Reputation: 33658

Webpack: Different (Define Plugin) settings per entry point

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.

Upvotes: 20

Views: 3349

Answers (2)

chuve
chuve

Reputation: 728

Try to look at webpack-merge – Smart Merging should help you to solve your case.

It can help to make dynamic configuration with specific entry points, plugins and what ever you want that would be depends on some variable on env.

Good practice to split configuration into different files. You can make some common configuration with the same things through all entry points, e.g loaders and then make custom configurations for with_admin_mode and without_admin_node modes.

Upvotes: -1

JusMalcolm
JusMalcolm

Reputation: 1431

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;

Upvotes: 0

Related Questions