如何在Webpack中传递环境相关变量？

在 Webpack 中传递环境相关变量

将 Angular 应用从 Gulp 迁移到 Webpack 时，一项常见任务是管理环境相关变量。以下是使用 Webpack 实现此目的的三种有效方法：

1. DefinePlugin

此方法使用 DefinePlugin 直接替换 HTML 页面中的变量：

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

注意，字符串格式保留变量的环境值。

2. EnvironmentPlugin

EnvironmentPlugin 通过将环境值映射到内部代码来简化 DefinePlugin 流程：

new webpack.EnvironmentPlugin(['NODE_ENV'])

3.别名

对于复杂的配置需求，可以使用别名模块：

消费端：

var config = require('config');

配置模块：

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

这允许您根据环境变量从指定模块导出配置。

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