Webpack中可互换的配置文件

Question

I'm trying to bundle a react project that can run in multiple environments and needs different configurations to run on each one. I have it set up with browserify, but have recently been looking to move to webpack.

The idea goes like this: there's a js directory with a bunch of js files, of which main.js is the entry point. There is also a config folder with development.js , staging.js , production.js and so on. I am importing the configuration from all files using import config from './config' . So I want to be able to create a main.bundle.js file with all our code, and another config.js whose contents can be replaced with those of {environment}.js .

This allows us to choose the configuration for the app in deploy time , not at build time, just by copying over the contents of {environment.js} .

I have attempted to unsuccessfully use webpack's CommonsChunkPlugin , but it complains at bundle time that js/config.js is not there (obviously).

Answer 1

Why not make multiple builds, one with each config, and then deploy the one you want? There's different ways you could load the desired config for the build, but one very way would be to use the DefinePlugin to define constants for each environment, write a conditional against those constants to load the corresponding config, and let the Uglify plugin's dead code elimination pare down the conditional to the one valid case. I've used this approach in a number of places to handle per-environment conditionals without bloating the production code.