fix: fix refesh tab on chrome

.eslintignore

@@ -1 +1,2 @@
 **/node_modules/**
+webpack.config.js

package.json

@@ -11,11 +11,11 @@
   "bugs": {
     "url": "https://github.com/misa198/octotree-theme/issues"
   },
-  "version": "1.3.2",
+  "version": "1.3.3",
   "scripts": {
     "pre-commit": "lint-staged",
-    "build:firefox": "rm -rf build/firefox && cross-env PLATFORM=firefox webpack --config webpack.config.js --display-error-details --progress --colors",
-    "build:chromium": "rm -rf build/chromium && cross-env PLATFORM=chromium webpack --config webpack.config.js --display-error-details --progress --colors",
+    "build:firefox": "rm -rf build/firefox && cross-env PLATFORM=firefox webpack --config webpack.config.js",
+    "build:chromium": "rm -rf build/chromium && cross-env PLATFORM=chromium webpack --config webpack.config.js",
     "build": "npm run build:chromium && npm run build:firefox",
     "lint": "eslint src/**/*.ts",
     "lint:fix": "npm run lint -- --fix",
@@ -26,8 +26,6 @@
     "dom-loaded": "^2.0.0",
     "file-icons-js": "^1.1.0",
     "is-mobile": "^3.0.0",
-    "node-sass": "^4.9.4",
-    "sass-loader": "^7.2.0",
     "select-dom": "^7.1.1",
     "selector-observer": "^2.1.6",
     "webext-domain-permission-toggle": "^2.1.0",
@@ -36,38 +34,36 @@
   },
   "devDependencies": {
     "@types/capitalize": "^2.0.0",
-    "@types/chrome": "^0.0.134",
-    "@types/css-font-loading-module": "^0.0.4",
+    "@types/chrome": "^0.0.179",
+    "@types/css-font-loading-module": "^0.0.7",
     "@types/firefox-webext-browser": "^94.0.1",
-    "@types/node": "^17.0.18",
+    "@types/node": "^17.0.21",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.0.3",
+    "copy-webpack-plugin": "^10.2.4",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.2",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "eslint": "^7.24.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.2.0",
-    "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",
-    "file-loader": "^6.2.0",
+    "html-minimizer-webpack-plugin": "^3.5.0",
     "husky": "^6.0.0",
     "lint-staged": "^10.5.4",
-    "mini-css-extract-plugin": "^1.5.0",
+    "mini-css-extract-plugin": "^2.6.0",
+    "path": "^0.12.7",
     "prettier": "^2.2.1",
     "prettier-package-json": "^2.1.3",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^4.2.3",
-    "ts-loader": "^8.1.0",
-    "typescript": "^4.2.4",
-    "webpack": "^4.39.1",
-    "webpack-cli": "^3.3.6",
-    "webpack-extension-reloader": "^1.1.4",
-    "write-file-webpack-plugin": "^4.5.1"
+    "sass": "^1.49.9",
+    "sass-loader": "^12.6.0",
+    "ts-loader": "^9.2.7",
+    "typescript": "^4.6.2",
+    "webpack": "^5.70.0",
+    "webpack-cli": "^4.9.2"
   },
   "keywords": [
     "Chrome Extension",

tsconfig.json

@@ -16,12 +16,7 @@
     "sourceMap": false
   },
   "include": [
-    "src/scripts/*.ts",
-    "src/scripts/constants/keys.ts",
-    "src/scripts/constants/colorThemes.ts",
-    "src/scripts/utils/detectBrowser.ts",
-    "src/scripts/popup.ts",
-    "src/scripts/utils/storage.ts"
+    "src/scripts/**/*.ts",
   ],
   "exclude": ["node_modules", "build"]
 }

webpack.config.js

@@ -1,8 +1,9 @@
 const webpack = require('webpack');
 const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const WriteFilePlugin = require('write-file-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const HtmlMinimizerPlugin = require('html-minimizer-webpack-plugin');
 
 const fileExtensions = [
   'jpg',
@@ -18,6 +19,7 @@ const fileExtensions = [
 ];
 
 const options = {
+  mode: 'production',
   entry: {
     background: path.join(__dirname, 'src', 'scripts', 'background.ts'),
     popup: path.join(__dirname, 'src', 'scripts', 'popup.ts'),
@@ -33,14 +35,13 @@ const options = {
   module: {
     rules: [
       {
-        test: /\.ts$/,
+        test: /\.ts?$/,
         use: 'ts-loader',
         exclude: /node_modules/,
       },
       {
-        test: /\.(scss|css)$/,
+        test: /\.s[ac]ss$/i,
         use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
-        exclude: /node_modules/,
       },
       {
         test: new RegExp(`.(${fileExtensions.join('|')})$`),
@@ -52,7 +53,7 @@ const options = {
     new webpack.DefinePlugin({
       'process.env.PLATFORM': JSON.stringify(process.env.PLATFORM),
     }),
-    new CopyWebpackPlugin({
+    new CopyPlugin({
       patterns: [
         {
           from: `src/platforms/manifest.${process.env.PLATFORM}.json`,
@@ -67,30 +68,27 @@ const options = {
             ),
         },
         {
-          from: 'src/icons',
-          to: 'icons',
-        },
-        {
-          from: 'src/popup.html',
-          to: '',
+          from: path.join(__dirname, 'src', 'icons/*.png'),
+          to: 'icons/[name][ext]',
         },
         {
-          from: 'src/popup-disabled.html',
-          to: '',
+          from: path.join(__dirname, 'src', '*.html'),
+          to: '[name].html',
         },
       ],
     }),
-    new WriteFilePlugin(),
-    new MiniCssExtractPlugin({ filename: '[name].css' }),
+    new HtmlMinimizerPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: false,
+    }),
   ],
+  optimization: {
+    minimizer: [new CssMinimizerPlugin()],
+  },
 };
 
-options.mode = 'production';
-options.plugins.push(
-  new webpack.LoaderOptionsPlugin({
-    minimize: true,
-    debug: false,
-  })
-);
-
 module.exports = options;