Question

如何在处理时间内获取/访问webpack ENV变量（而不是浏览器中的运行时）？ webpack.DefinePlugin(...)似乎在html文件中不起作用，我无法访问主index.html

中的ENV变量

任何解决方案？

Answer 1

您可以使用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 %>">

Answer 2

实际上，您还可以使用whm.example.com在ejs模板中使用DefinePlugin中的变量。

EJS：

HtmlWebpackPlugin

webpack.config.js：

<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>

（您不必使用new webpack.DefinePlugin({ 'process.env.GA_TRACKING_ID': JSON.stringify(process.env.GA_TRACKING_ID), }),，但如果未定义变量，则会阻止您的应用崩溃。）

如何在html中传递webpack环境变量？

2 个答案: