如何在 Angular 应用程序的 Webpack 中复制环境相关变量替换？

在 Webpack 中传递环境相关变量

将 Angular 应用程序从 gulp 迁移到 webpack 时，您可能会遇到如何复制根据 NODE_ENV 替换 HTML 文件中的变量。本文提供了在 webpack 中实现此目的的几种方法。

DefinePlugin

DefinePlugin 允许您用环境变量“按原样”替换特定字符串。

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

EnvironmentPlugin

与 DefinePlugin 类似，EnvironmentPlugin 内部使用它将环境值映射到代码。

new webpack.EnvironmentPlugin(['NODE_ENV'])

别名

另一种选择是通过别名模块使用配置。在消费者代码中：

var config = require('config');

配置可以定义如下：

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

基于NODE_ENV（例如“development”），将加载配置文件。从该文件导出的配置可以包含与环境相关的变量。

通过利用这些方法，您可以在 webpack 构建过程中有效地管理 HTML 文件中的与环境相关的变量，类似于使用 gulp 和gulp-预处理。

以上是如何在 Angular 应用程序的 Webpack 中复制环境相关变量替换？的详细内容。更多信息请关注PHP中文网其他相关文章！