在 webpack 中传递与环境相关的变量

javascript webpack

2022-08-29 23:39:08

我正在尝试将一个有角度的应用程序从gulp转换为webpack。在 gulp 中，我使用 gulp-preprocess 来替换 html 页面中的一些变量（例如数据库名称），具体取决于NODE_ENV。使用webpack获得类似结果的最佳方法是什么？

答案 1

有两种基本方法可以实现此目的。

DefinePlugin

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),

请注意，这将仅按“原样”替换匹配项。这就是字符串采用其格式的原因。你可以有一个更复杂的结构，比如那里的对象，但你明白了。

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_ENVdevelopment./config/development.js

module.exports = {
    testing: 'something',
    ...
};

答案 2

只是另一个选项，如果您只想使用cli界面，只需使用webpack选项即可。我在我的中添加以下脚本：definepackage.json

"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"

所以我只需要跑.npm run build-production