我正在尝试将一个angular应用程序从gulp转换为webpack。在gulp中，我使用gulp预处理来替换html页面中的一些变量(例如数据库名称)，这取决于NODE_ENV。用webpack实现类似结果的最佳方法是什么?
当前回答
我研究了几个关于如何设置特定于环境的变量的选项，最后得到了这样的结果:
我目前有2个webpack配置:
webpack.production.config.js
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production'),
'API_URL': JSON.stringify('http://localhost:8080/bands')
}
}),
webpack.config.js
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('development'),
'API_URL': JSON.stringify('http://10.10.10.10:8080/bands')
}
}),
在我的代码中，我以这种(简要)方式获取API_URL的值:
统一文件格式
编辑2016年11月3日
Webpack文档有一个例子:https://webpack.js.org/plugins/define-plugin/#usage
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
使用ESLint，如果你有no-undef规则，你需要在代码中明确地允许未定义的变量。http://eslint.org/docs/rules/no-undef像这样:
/*global TWO*/
console.log('Running App version ' + TWO);
EDIT 2017年9月7日(Create-React-App特定)
如果您不喜欢配置太多，请查看Create-React-App: Create-React-App -添加自定义环境变量。实际上CRA使用Webpack。
其他回答
我研究了几个关于如何设置特定于环境的变量的选项，最后得到了这样的结果:
我目前有2个webpack配置:
webpack.production.config.js
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production'),
'API_URL': JSON.stringify('http://localhost:8080/bands')
}
}),
webpack.config.js
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('development'),
'API_URL': JSON.stringify('http://10.10.10.10:8080/bands')
}
}),
在我的代码中，我以这种(简要)方式获取API_URL的值:
统一文件格式
编辑2016年11月3日
Webpack文档有一个例子:https://webpack.js.org/plugins/define-plugin/#usage
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
使用ESLint，如果你有no-undef规则，你需要在代码中明确地允许未定义的变量。http://eslint.org/docs/rules/no-undef像这样:
/*global TWO*/
console.log('Running App version ' + TWO);
EDIT 2017年9月7日(Create-React-App特定)
如果您不喜欢配置太多，请查看Create-React-App: Create-React-App -添加自定义环境变量。实际上CRA使用Webpack。
你可以直接使用webpack中的EnvironmentPlugin来在编译过程中访问任何环境变量。
你只需要在webpack.config.js文件中声明这个插件:
var webpack = require('webpack');
module.exports = {
/* ... */
plugins: [
new webpack.EnvironmentPlugin(['NODE_ENV'])
]
};
注意，必须显式声明要使用的环境变量的名称。
我发现下面的解决方案是最容易为Webpack 2设置环境变量:
例如，我们有一个webpack设置:
var webpack = require('webpack')
let webpackConfig = (env) => { // Passing envirmonment through
// function is important here
return {
entry: {
// entries
},
output: {
// outputs
},
plugins: [
// plugins
],
module: {
// modules
},
resolve: {
// resolves
}
}
};
module.exports = webpackConfig;
在Webpack中添加环境变量:
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
}),
]
定义插件变量并将其添加到插件中:
new webpack.DefinePlugin({
'NODE_ENV': JSON.stringify(env.NODE_ENV || 'development')
}),
现在当运行webpack命令时，传递env。NODE_ENV作为参数:
webpack --env.NODE_ENV=development
// OR
webpack --env.NODE_ENV development
现在您可以在代码中的任何地方访问NODE_ENV变量。
你可以使用——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
再给这些问题补充一个答案:
使用ExtendedDefinePlugin而不是DefinePlugin
npm install extended-define-webpack-plugin --save-dev.
ExtendedDefinePlugin使用起来更简单，并且有文档:-) 链接
因为DefinePlugin缺乏良好的文档，我想通过说它实际上像c#中的#DEFINE一样工作来帮助解决问题。
#if (DEBUG)
Console.WriteLine("Debugging is enabled.");
#endif
因此，如果你想了解DefinePlugin是如何工作的，请阅读c# #define文档。链接
