腾讯云·社区
如何在html中传递webpack环境变量？内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用
内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用
- 回答 (2)
- 关注 (1)
- 查看 (3843)
如何在处理时间内获取/访问webpack ENV变量（而不是浏览器中的运行时）？在webpack.DefinePlugin(...)似乎没有在HTML文件中工作，我没有访问ENV变量在主index.html
你可以使用html-webpack-plugin。你将不得不使用.ejs或其他一些模板语言然后使用它
new HtmlWebpackPlugin({
template: './src/public/index.ejs',
inject: 'body',
environment: process.env.NODE_ENV
}),
在index.ejs中
<body class="<%= htmlWebpackPlugin.options.environment %>">
实际上，你也可以使用你DefinePlugin的ejs模板中的变量HtmlWebpackPlugin。
EJS：
<script async src="https://www.googletagmanager.com/gtag/js?id=<%= process.env.GA_TRACKING_ID %>"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '<%= process.env.GA_TRACKING_ID %>');
</script>
webpack.config.js：
new webpack.DefinePlugin({
'process.env.GA_TRACKING_ID': JSON.stringify(process.env.GA_TRACKING_ID),
}),
HTML
扫码关注云+社区
领取腾讯云代金券