我们在一个单页应用程序中使用了Webpack。该应用程序部署在许多环境中。我们有一个要求,该应用程序需要调用给定环境中的特定端点。
为了提供给定环境的端点地址,我们需要一个环境模块。这是当前的解决方案(有很多解决方案,但这不是问题的重点)。但是,我们需要将config.js从缩小文件中排除,以便在部署过程中可以覆盖它。
config.js看起来像下面这样:
module.exports = {
env: {
endpointUrl: 'http://1.2.3.4',
authUrl: 'http://5.6.7.8'
}
};
以下是引用该内容的方式:
const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;
Webpack配置如下:
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 问题: