如何在 Angular 应用程序的 Webpack 中传递环境相关变量？

在 Webpack 中传递环境相关变量

在从 Gulp 转换为 Webpack 的 Angular 应用中，使用 webpack 复制 Gulp-Preprocess 的功能基于 NODE_ENV 动态替换变量（例如数据库名称）需要不同的方法。

有多种选项可以实现此目的：

DefinePlugin

使用 webpack.DefinePlugin 将环境变量作为 JSON 字符串直接注入代码中。

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

请注意，此技术“按原样”替换匹配字符串，需要特定的 JSON 格式。复杂的结构（如对象）是可能的，但原理保持不变。

EnvironmentPlugin

利用 webpack.EnvironmentPlugin，它内部使用 DefinePlugin。它将环境值映射到代码，简化了语法。

new webpack.EnvironmentPlugin(['NODE_ENV'])

别名

通过别名模块使用配置：

// Consumer side
var config = require('config');

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

基于在 NODE_ENV 上，此示例映射到 ./config/development.js 等模块，该模块导出所需的配置。

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