We are using WebPack in a single page application. The application is deployed to many environments. We have a requirement where the application needs to call a specific endpoint in a given environment.
In order to provide the endpoint address for the given environment is to have an environments module. This is the current solution (there are many and this is not the point of the question). However we need to exclude the config.js from minification so that it can be overwritten as part of the deployment process.
The config.js looks like the following:
module.exports = {
env: {
endpointUrl: 'http://1.2.3.4',
authUrl: 'http://5.6.7.8'
}
};
And is referenced using the following:
const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;
The WebPack config looks like the following:
var webpack = require('webpack');
?
module.exports = {
entry: {
main: './src/js/main.jsx',
login: './src/js/login-main.jsx'
},
output: {
path: __dirname + '/dist',
filename: '[name].bundle.js'
},
devtool: 'source-map',
module: {
loaders: [{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
plugins: ['transform-react-jsx'],
query: {stage: 0}
}, {
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader'
}]
},
plugins: [
new webpack.ProvidePlugin({
fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
}),
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEV || false))
})
]
};
So far we have looked at externals and module loaders but have not found anything that works. The exclude in the module loader still causes the module to be minified.
Some SO questions that we have looked at:
- Exclude react from webpack bundle
- Webpack and external libraries
- How can I exclude code path when bundling with webpack/browserify?
