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

Question

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

Answer 1

有两种基本方法可以实现这一点。

定义插件

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

请注意，这只会“按原样”替换匹配项。这就是为什么字符串是它的格式。你可以有一个更复杂的结构，比如一个对象，但你明白了。

环境插件

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPlugin 在内部使用 DefinePlugin 并通过它将环境值映射到代码。 Terser 语法。

别名

您也可以通过 an aliased module 使用配置.从消费者的 Angular 来看，它看起来像这样:

var config = require('config');

配置本身可能如下所示:

resolve: {
    alias: {
        config: path.join(__dirname, 'config', process.env.NODE_ENV)
    }
}

假设 process.env.NODE_ENV 是 development。然后它会映射到 ./config/development.js 中。它映射到的模块可以像这样导出配置:

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