switch from htmlplugin to dotenv to divide dev environment and prod e…

…nvironment
policy-design-lab · Dec 20, 2023 · f4a45e6 · f4a45e6
1 parent ce8d347
commit f4a45e6
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^5.2.4",
     "css-minimizer-webpack-plugin": "^2.0.0",
+    "dotenv-webpack": "^8.0.1",
     "eslint": "^7.26.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",

diff --git a/src/index.html b/src/index.html
@@ -4,12 +4,12 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script async src="<%= htmlWebpackPlugin.options.GA_URL %>"></script>
+  <script async src="<%= process.env.GA_URL %>"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
-    var url = "<%= htmlWebpackPlugin.options.GA_URL %>";
+    var url = "<%= process.env.GA_URL %>";
     var regex = /id=(.*)/;
     var id = url.match(regex)[1];
     gtag('config', id);

diff --git a/webpack.common.js b/webpack.common.js
@@ -2,7 +2,9 @@ const path = require('path');
 const Webpack = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const Dotenv = require('dotenv-webpack');
 
 module.exports = {
     target: 'web',
@@ -78,7 +80,9 @@ module.exports = {
     },
 
     plugins: [
-
+        new HtmlWebpackPlugin({
+            template: 'src/index.html'
+        }),
         new Webpack.DefinePlugin({
             "process.env": {
                 "APP_ENV": JSON.stringify(process.env.APP_ENV)
@@ -104,6 +108,7 @@ module.exports = {
             }
         }),
         new MiniCssExtractPlugin({ filename: 'css/[name]-[fullhash].css' }),
-        new CleanWebpackPlugin()
+        new CleanWebpackPlugin(),
+        new Dotenv(),
     ]
 };
diff --git a/webpack.dev.js b/webpack.dev.js
@@ -1,7 +1,6 @@
 const Webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const commonConfig = require('./webpack.common');
 
@@ -43,11 +42,7 @@ module.exports = merge(commonConfig, {
 
     plugins: [
         new Webpack.DefinePlugin({
-            ENV: JSON.stringify('development'),
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/index.html',
-             GA_URL: 'https://www.googletagmanager.com/gtag/js?id=G-K4MLHWSVVT',
+            ENV: JSON.stringify('development')
         }),
         new BundleAnalyzerPlugin({ openAnalyzer: false, analyzerPort: 8081 })
     ],

diff --git a/webpack.prod.js b/webpack.prod.js
@@ -1,6 +1,6 @@
 const Webpack = require('webpack');
 const { merge } = require('webpack-merge');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+
 const commonConfig = require('./webpack.common');
 
 module.exports = merge(commonConfig, {
@@ -33,13 +33,8 @@ module.exports = merge(commonConfig, {
     },
 
     plugins: [
-        new HtmlWebpackPlugin({
-            template: 'src/index.html',
-            GA_URL: 'https://www.googletagmanager.com/gtag/js?id=G-GFR8PTXMDM',
-        }),
         new Webpack.DefinePlugin({
-            ENV: JSON.stringify('production'),
-
+            ENV: JSON.stringify('production')
         })
     ]
 });