bug fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-extension-boilerplate-react",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A chrome extension boilerplate built with React 17 and Webpack 4",
   "license": "MIT",
   "repository": {
@@ -41,14 +41,14 @@
     "file-loader": "^6.1.1",
     "fs-extra": "^9.0.1",
     "html-loader": "^1.3.2",
-    "html-webpack-plugin": "^4.5.0",
+    "html-webpack-plugin": "^5.0.0-alpha.7",
     "node-sass": "^4.14.1",
     "prettier": "^2.1.2",
     "sass-loader": "^10.0.4",
     "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.0.2",
     "webpack": "^5.2.0",
     "webpack-cli": "^4.1.0",
-    "webpack-dev-server": "^3.11.0",
-    "write-file-webpack-plugin": "^4.5.1"
+    "webpack-dev-server": "^3.11.0"
   }
 }

webpack.config.js

@@ -4,13 +4,14 @@ var webpack = require('webpack'),
   env = require('./utils/env'),
   { CleanWebpackPlugin } = require('clean-webpack-plugin'),
   CopyWebpackPlugin = require('copy-webpack-plugin'),
-  HtmlWebpackPlugin = require('html-webpack-plugin');
+  HtmlWebpackPlugin = require('html-webpack-plugin'),
+  TerserPlugin = require('terser-webpack-plugin');
 
-// load the secrets
 var alias = {
   'react-dom': '@hot-loader/react-dom',
 };
 
+// load the secrets
 var secretsPath = path.join(__dirname, 'secrets.' + env.NODE_ENV + '.js');
 
 var fileExtensions = [
@@ -48,16 +49,6 @@ var options = {
   },
   module: {
     rules: [
-      // {
-      //   test: /\.css$/,
-      //   loader: 'style-loader!css-loader',
-      //   exclude: /node_modules/,
-      // },
-      // {
-      //   test: /\.scss$/,
-      //   loader: 'sass-loader',
-      //   exclude: /node_modules/,
-      // },
       {
         // look for .css or .scss files
         test: /\.(css|scss)$/,
@@ -144,16 +135,19 @@ var options = {
       template: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.html'),
       filename: 'newtab.html',
       chunks: ['newtab'],
+      cache: false,
     }),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, 'src', 'pages', 'Options', 'index.html'),
       filename: 'options.html',
       chunks: ['options'],
+      cache: false,
     }),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, 'src', 'pages', 'Popup', 'index.html'),
       filename: 'popup.html',
       chunks: ['popup'],
+      cache: false,
     }),
     new HtmlWebpackPlugin({
       template: path.join(
@@ -165,6 +159,7 @@ var options = {
       ),
       filename: 'background.html',
       chunks: ['background'],
+      cache: false,
     }),
   ],
   infrastructureLogging: {
@@ -174,6 +169,15 @@ var options = {
 
 if (env.NODE_ENV === 'development') {
   options.devtool = 'eval-cheap-module-source-map';
+} else {
+  options.optimization = {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false,
+      }),
+    ],
+  };
 }
 
 module.exports = options;