我正在尝试将一个angular应用程序从gulp转换为webpack。在gulp中，我使用gulp预处理来替换html页面中的一些变量(例如数据库名称)，这取决于NODE_ENV。用webpack实现类似结果的最佳方法是什么?
当前回答
你可以直接使用webpack中的EnvironmentPlugin来在编译过程中访问任何环境变量。
你只需要在webpack.config.js文件中声明这个插件:
var webpack = require('webpack');
module.exports = {
/* ... */
plugins: [
new webpack.EnvironmentPlugin(['NODE_ENV'])
]
};
注意，必须显式声明要使用的环境变量的名称。
其他回答
你可以直接使用webpack中的EnvironmentPlugin来在编译过程中访问任何环境变量。
你只需要在webpack.config.js文件中声明这个插件:
var webpack = require('webpack');
module.exports = {
/* ... */
plugins: [
new webpack.EnvironmentPlugin(['NODE_ENV'])
]
};
注意，必须显式声明要使用的环境变量的名称。
现在2020年，我也面临着同样的问题，但是对于这个老问题，有很多新的答案，就列举一些吧:
这是webpack.config.js
plugins: [
new HtmlWebpackPlugin({
// 1. title is the parameter, you can use in ejs template
templateParameters:{
title: JSON.stringify(someting: 'something'),
},
}),
//2. BUILT_AT is a parameter too. can use it.
new webpack.DefinePlugin({
BUILT_AT: webpack.DefinePlugin.runtimeValue(Date.now,"some"),
}),
//3. for webpack5, you can use global variable: __webpack_hash__
//new webpack.ExtendedAPIPlugin()
],
//4. this is not variable, this is module, so use 'import tt' to use it.
externals: {
'ex_title': JSON.stringify({
tt: 'eitentitle',
})
},
这4种方法只是基本的，我相信还有更多的方法。但我认为这是最简单的方法。
只是另一个选项，如果你只想使用cli界面，只需使用webpack的define选项。我在包中添加了以下脚本。json:
"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"
我只需要运行npm运行build-production。
你可以使用——env传递环境变量，而不需要额外的插件
Webpack -
webpack --config webpack.config.js --env.foo=bar
Webpack 5+（无）
webpack --config webpack.config.js --env foo=bar
然后，使用webpack.config.js中的变量:
module.exports = function(env) {
if (env.foo === 'bar') {
// do something
}
}
进一步阅读:Webpack 2.0不支持自定义命令行参数? # 2254
这里有一种方法，对我来说是有效的，并允许我通过重用json文件保持我的环境变量DRY。
const webpack = require('webpack');
let config = require('./settings.json');
if (__PROD__) {
config = require('./settings-prod.json');
}
const envVars = {};
Object.keys(config).forEach((key) => {
envVars[key] = JSON.stringify(config[key]);
});
new webpack.DefinePlugin({
'process.env': envVars
}),
