我正在尝试将一个angular应用程序从gulp转换为webpack。在gulp中，我使用gulp预处理来替换html页面中的一些变量(例如数据库名称)，这取决于NODE_ENV。用webpack实现类似结果的最佳方法是什么?
当前回答
有两种基本方法可以实现这一点。
DefinePlugin
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
注意，这将只是替换匹配的“原样”。这就是为什么字符串是这样的格式。你可以有一个更复杂的结构，比如一个物体但你懂的。
EnvironmentPlugin
new webpack.EnvironmentPlugin(['NODE_ENV'])
EnvironmentPlugin在内部使用DefinePlugin并通过它将环境值映射到代码。含混的语法。
别名
或者，您可以通过别名模块使用配置。从消费者的角度来看，它是这样的:
var config = require('config');
配置本身可能是这样的:
resolve: {
alias: {
config: path.join(__dirname, 'config', process.env.NODE_ENV)
}
}
我们写入process。env。NODE_ENV是开发。然后它会映射到。/config/development.js。它映射到的模块可以像这样导出配置:
module.exports = {
testing: 'something',
...
};
其他回答
你可以使用——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
你可以直接使用webpack中的EnvironmentPlugin来在编译过程中访问任何环境变量。
你只需要在webpack.config.js文件中声明这个插件:
var webpack = require('webpack');
module.exports = {
/* ... */
plugins: [
new webpack.EnvironmentPlugin(['NODE_ENV'])
]
};
注意，必须显式声明要使用的环境变量的名称。
我的webpack版本“webpack”:“^4.29.6”的变通方法非常简单。
//package.json
{
...
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --open --mode development"
},
}
你可以在webpack命令中传递——mode参数，然后在webpack.config.js中
// webpack.config.json
module.exports = (env,argv) => {
return {
...
externals: {
// global app config object
config: JSON.stringify({
apiUrl: (argv.mode==="production") ? '/api' : 'localhost:3002/api'
})
}
}
我在代码中像这样使用baseurl
// my api service
import config from 'config';
console.log(config.apiUrl) // like fetch(`${config.apiUrl}/users/user-login`)
只是另一个选项，如果你只想使用cli界面，只需使用webpack的define选项。我在包中添加了以下脚本。json:
"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"
我只需要运行npm运行build-production。
我更喜欢使用。env文件不同的环境。
使用webpack.dev.config将env.dev复制到。env到根文件夹 使用webpack.prod.config复制env。刺激到。env
在代码中
use
要求(dotenv) . config (); const API = process.env.API ##，它将存储.env文件中的值
