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

dar*_*mnx 21 environment-variables webpack

如何在处理时间内获取/访问webpack ENV变量(而不是浏览器中的运行时)?在webpack.DefinePlugin(...)似乎没有在HTML文件中工作,我没有访问ENV变量在主index.html

任何解决方案

小智 24

你可以使用html-webpack-plugin.您将不得不使用.ejs或其他一些模板语言,然后使用它

new HtmlWebpackPlugin({
        template: './src/public/index.ejs',
        inject: 'body',
        environment: process.env.NODE_ENV
    }),
Run Code Online (Sandbox Code Playgroud)

在index.ejs中

<body class="<%= htmlWebpackPlugin.options.environment %>">
Run Code Online (Sandbox Code Playgroud)


kon*_*ten 14

实际上,你也可以使用你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>
Run Code Online (Sandbox Code Playgroud)

webpack.config.js:

new webpack.DefinePlugin({
  'process.env.GA_TRACKING_ID': JSON.stringify(process.env.GA_TRACKING_ID),
}),
Run Code Online (Sandbox Code Playgroud)

(您不必使用process.env,但如果未定义变量,它将阻止您的应用崩溃.)