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

Question

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

Answer 1

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

定义插件

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

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

环境插件

new webpack.EnvironmentPlugin(['NODE_ENV'])

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

别名

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

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',
    ...
};