upgrade to webpack 5

Author: lxieyang

README.md

@@ -73,7 +73,7 @@ Youtube Preview Link: [https://youtu.be/BcpD38IjY6A](https://youtu.be/BcpD38IjY6
 
 Built with the following template:
 
-👉 👉 [Chrome Extension Boilerplate with React 16.6+ and Webpack 4+](https://github.com/lxieyang/chrome-extension-boilerplate-react)
+👉 👉 [Chrome Extension Boilerplate with React 17 and Webpack 5](https://github.com/lxieyang/chrome-extension-boilerplate-react)
 
 ---
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vertical-tabs-chrome-extension",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "A chrome extension that presents your tabs vertically.",
   "license": "MIT",
   "repository": {
@@ -14,61 +14,64 @@
   },
   "dependencies": {
     "@hot-loader/react-dom": "^16.12.0",
-    "@material-ui/core": "^4.9.8",
-    "@material-ui/lab": "^4.0.0-alpha.47",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@types/chrome": "0.0.125",
     "classnames": "^2.2.6",
     "clipboard-copy": "^3.1.0",
     "glamor": "^2.20.40",
-    "immutability-helper": "^3.0.1",
-    "jquery": "^3.4.1",
-    "lodash": "^4.17.15",
+    "immutability-helper": "^3.1.1",
+    "jquery": "^3.5.1",
+    "lodash": "^4.17.20",
     "prop-types": "^15.7.2",
-    "re-resizable": "^6.1.1",
+    "re-resizable": "^6.7.0",
     "react": "^16.12.0",
-    "react-contextmenu": "^2.13.0",
-    "react-dnd": "^9.5.1",
-    "react-dnd-html5-backend": "^9.5.1",
+    "react-contextmenu": "^2.14.0",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "react-dom": "^16.12.0",
-    "react-hot-loader": "^4.12.20",
+    "react-hot-loader": "^4.13.0",
     "react-hover-observer": "^2.1.1",
-    "react-icons": "^3.9.0",
-    "react-loader-spinner": "^3.1.5",
+    "react-icons": "^3.11.0",
+    "react-loader-spinner": "^3.1.14",
     "react-media": "^1.10.0",
     "react-tiny-popover": "^4.0.0",
     "styled-components": "^4.4.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
-    "babel-eslint": "^10.0.2",
-    "babel-loader": "^8.0.6",
-    "babel-preset-react-app": "^9.0.0",
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-react": "^7.12.1",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
+    "babel-preset-react-app": "^10.0.0",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.0.5",
-    "css-loader": "^3.2.0",
-    "eslint": "^6.2.2",
-    "eslint-config-prettier": "^6.1.0",
-    "eslint-config-react-app": "^5.0.1",
-    "eslint-plugin-flowtype": "^4.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^2.0.1",
-    "file-loader": "^4.2.0",
-    "fs-extra": "^8.1.0",
-    "html-loader": "0.5.5",
-    "html-webpack-plugin": "3.2.0",
-    "husky": "^3.0.4",
-    "lint-staged": "^9.2.0",
-    "prettier": "1.18.2",
+    "copy-webpack-plugin": "^6.2.1",
+    "css-loader": "^5.0.0",
+    "eslint": "^7.12.1",
+    "eslint-config-prettier": "^6.14.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "file-loader": "^6.1.1",
+    "fs-extra": "^9.0.1",
+    "html-loader": "^1.3.2",
+    "html-webpack-plugin": "^5.0.0-alpha.7",
+    "husky": "^4.3.0",
+    "lint-staged": "^10.5.0",
+    "node-sass": "^4.14.1",
+    "prettier": "^2.1.2",
     "pretty-quick": "^1.11.1",
-    "style-loader": "^1.0.0",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "3.2.1",
-    "write-file-webpack-plugin": "^4.5.1"
+    "sass-loader": "^10.0.4",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.0.2",
+    "webpack": "^5.3.0",
+    "webpack-cli": "^4.1.0",
+    "webpack-dev-server": "^3.11.0"
   },
   "husky": {
     "hooks": {

package.json

@@ -13,7 +13,7 @@ const logo = (props) => {
   let src = AppLogo;
 
   if (window.chrome !== undefined && chrome.extension !== undefined) {
-    src = chrome.extension.getURL(AppLogo);
+    src = chrome.extension.getURL('icon-128.png');
   }
 
   return (

src/components/Logo/Logo.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { render } from 'react-dom';
 import { DndProvider } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import Media from 'react-media';
 
 import Sidebar from './Sidebar';

src/pages/Sidebar/index.jsx

@@ -29,9 +29,13 @@ delete config.chromeExtensionBoilerplate;
 var compiler = webpack(config);
 
 var server = new WebpackDevServer(compiler, {
+  https: false,
   hot: true,
+  injectClient: false,
+  writeToDisk: true,
+  port: env.PORT,
   contentBase: path.join(__dirname, '../build'),
-  // sockPort: env.PORT,
+  publicPath: `http://localhost:${env.PORT}`,
   headers: {
     'Access-Control-Allow-Origin': '*',
   },

utils/webserver.js

@@ -5,7 +5,7 @@ var webpack = require('webpack'),
   { CleanWebpackPlugin } = require('clean-webpack-plugin'),
   CopyWebpackPlugin = require('copy-webpack-plugin'),
   HtmlWebpackPlugin = require('html-webpack-plugin'),
-  WriteFilePlugin = require('write-file-webpack-plugin');
+  TerserPlugin = require('terser-webpack-plugin');
 
 // load the secrets
 var alias = {
@@ -49,13 +49,30 @@ var options = {
   module: {
     rules: [
       {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader',
-        exclude: /node_modules/,
+        // look for .css or .scss files
+        test: /\.(css|scss)$/,
+        // in the `src` directory
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
       },
       {
         test: new RegExp('.(' + fileExtensions.join('|') + ')$'),
-        loader: 'file-loader?name=[name].[ext]',
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+        },
         exclude: /node_modules/,
       },
       {
@@ -74,7 +91,7 @@ var options = {
     alias: alias,
     extensions: fileExtensions
       .map((extension) => '.' + extension)
-      .concat(['.jsx', '.js', '.css']),
+      .concat(['.js', '.jsx', '.css']),
   },
   plugins: [
     new webpack.ProgressPlugin(),
@@ -85,13 +102,13 @@ var options = {
     }),
     // expose and write the allowed env vars on the compiled bundle
     new webpack.EnvironmentPlugin(['NODE_ENV']),
-    new CopyWebpackPlugin(
-      [
+    new CopyWebpackPlugin({
+      patterns: [
         {
           from: 'src/manifest.json',
           to: path.join(__dirname, 'build'),
           force: true,
-          transform: function(content, path) {
+          transform: function (content, path) {
             // generates the manifest file using the package.json informations
             return Buffer.from(
               JSON.stringify({
@@ -103,33 +120,27 @@ var options = {
           },
         },
       ],
-      {
-        logLevel: 'info',
-        copyUnmodified: true,
-      }
-    ),
-    new CopyWebpackPlugin(
-      [
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
         {
           from: 'src/pages/Content/content.styles.css',
           to: path.join(__dirname, 'build'),
           force: true,
         },
       ],
-      {
-        logLevel: 'info',
-        copyUnmodified: true,
-      }
-    ),
+    }),
     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', 'Sidebar', 'index.html'),
       filename: 'sidebar.html',
       chunks: ['sidebar'],
+      cache: false,
     }),
     new HtmlWebpackPlugin({
       template: path.join(
@@ -141,13 +152,25 @@ var options = {
       ),
       filename: 'background.html',
       chunks: ['background'],
+      cache: false,
     }),
-    new WriteFilePlugin(),
   ],
+  infrastructureLogging: {
+    level: 'info',
+  },
 };
 
 if (env.NODE_ENV === 'development') {
-  options.devtool = 'cheap-module-eval-source-map';
+  options.devtool = 'eval-cheap-module-source-map';
+} else {
+  options.optimization = {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false,
+      }),
+    ],
+  };
 }
 
 module.exports = options;