在 webpack 中传递环境相关变量

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

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

定义插件

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

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

环境插件

new webpack.EnvironmentPlugin(['NODE_ENV'])

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

Alias

或者，您可以通过使用配置别名模块 https://webpack.js.org/configuration/resolve/#resolvealias。从消费者方面来看，它看起来像这样：

var config = require('config');

配置本身可能如下所示：

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

比方说process.env.NODE_ENV is development。它将映射到./config/development.js然后。它映射到的模块可以像这样导出配置：

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