web-dev-qa-db-fra.com

Comment passer des variables d'environnement webpack en html?

Comment puis-je obtenir/accéder aux variables ENV de webpack pendant le temps de traitement (pas lors de l'exécution dans le navigateur)? la webpack.DefinePlugin(...) ne semble pas fonctionner dans les fichiers html, je n'ai pas accès aux variables ENV dans la principale index.html

toute solution ?

webpackenvironment-variables
19
darkylmnx

Vous pouvez utiliser html-webpack-plugin . Vous devrez utiliser .ejs ou un autre langage de modèle, puis utiliser comme ça

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

dans index.ejs

<body class="<%= htmlWebpackPlugin.options.environment %>">
22
mist_dev

En fait, vous pouvez également utiliser vos variables de DefinePlugin dans votre modèle ejs, en utilisant 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),
}),

(Vous n'avez pas besoin d'utiliser process.env, mais cela empêchera votre application de se bloquer si la variable n'est pas définie.)

13
kontrollanten