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

【问题标题】：How can i pass webpack environment variables in html?如何在 html 中传递 webpack 环境变量？
【发布时间】：2016-10-06 17:25:58
【问题描述】：

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

有什么办法吗？

【问题讨论】：

标签： webpack environment-variables

【解决方案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 %>">

【讨论】：

【解决方案2】：

实际上，您也可以在您的 ejs 模板中使用来自 DefinePlugin 的变量，使用 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),
}),

（您不必使用process.env，但如果未定义变量，它将防止您的应用崩溃。）

【讨论】：