首页 >web前端 >js教程 >如何在 Angular Webpack 应用程序中传递环境相关变量?

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

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-28 02:29:14775浏览

How to Pass Environment-Dependent Variables in Angular Webpack Apps?

在 Webpack 中传递环境相关变量

将 Angular 应用从 Gulp 转换为 Webpack 提出了替换基于 NODE_ENV 的 HTML 页面变量的挑战。以下是使用 Webpack 实现此目的的几种有效方法:

1. DefinePlugin

此插件允许用提供的字符串替换匹配的变量:

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

2. EnvironmentPlugin

内部利用 DefinePlugin,该插件将环境值映射到代码:

new webpack.EnvironmentPlugin(['NODE_ENV'])

3。别名

通过创建别名模块,您可以通过消费者模块访问配置:

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

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

根据 NODE_ENV,这将映射到导出配置的模块,使您能够访问应用程序中与环境相关的变量。

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn