chore: update webserver

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "1.12.2",
+  "version": "1.12.3",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {
@@ -73,7 +73,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.5",
-    "@babel/eslint-parser": "7.15.7",
+    "@babel/eslint-parser": "^7.18.2",
     "@babel/preset-env": "^7.18.2",
     "@intlify/vue-i18n-loader": "^4.2.0",
     "@tailwindcss/typography": "^0.5.1",
@@ -102,15 +102,15 @@
     "lint-staged": "^13.0.1",
     "mini-css-extract-plugin": "^2.3.0",
     "postcss": "8.4.14",
-    "postcss-loader": "^6.1.1",
+    "postcss-loader": "^7.0.0",
     "prettier": "^2.6.2",
     "simple-git-hooks": "^2.6.1",
-    "source-map-loader": "3.0.0",
+    "source-map-loader": "^4.0.0",
     "tailwindcss": "^3.0.7",
     "terser-webpack-plugin": "^5.3.3",
     "vue-loader": "^17.0.0",
     "webpack": "^5.73.0",
     "webpack-cli": "4.9.2",
-    "webpack-dev-server": "3.11.2"
+    "webpack-dev-server": "^4.9.2"
   }
 }

utils/webserver.js

@@ -12,12 +12,11 @@ const env = require('./env');
 const options = config.chromeExtensionBoilerplate || {};
 const excludeEntriesToHotReload = options.notHotReload || [];
 
-/* eslint-disable-next-line */
 for (const entryName in config.entry) {
   if (excludeEntriesToHotReload.indexOf(entryName) === -1) {
     config.entry[entryName] = [
-      `webpack-dev-server/client?http://localhost:${env.PORT}`,
       'webpack/hot/dev-server',
+      `webpack-dev-server/client?hot=true&hostname=localhost&port=${env.PORT}`,
     ].concat(config.entry[entryName]);
   }
 }
@@ -30,22 +29,32 @@ delete config.chromeExtensionBoilerplate;
 
 const compiler = webpack(config);
 
-const server = new WebpackDevServer(compiler, {
-  https: false,
-  hot: true,
-  injectClient: false,
-  writeToDisk: true,
-  port: env.PORT,
-  contentBase: path.join(__dirname, '../build'),
-  publicPath: `http://localhost:${env.PORT}`,
-  headers: {
-    'Access-Control-Allow-Origin': '*',
+const server = new WebpackDevServer(
+  {
+    https: false,
+    hot: false,
+    client: false,
+    host: 'localhost',
+    port: env.PORT,
+    static: {
+      directory: path.join(__dirname, '../build'),
+    },
+    devMiddleware: {
+      publicPath: `http://localhost:${env.PORT}/`,
+      writeToDisk: true,
+    },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    allowedHosts: 'all',
   },
-  disableHostCheck: true,
-});
+  compiler
+);
 
 if (process.env.NODE_ENV === 'development' && module.hot) {
   module.hot.accept();
 }
 
-server.listen(env.PORT);
+(async () => {
+  await server.start();
+})();

webpack.config.js

@@ -109,12 +109,11 @@ const options = {
       },
       {
         test: new RegExp(`.(${fileExtensions.join('|')})$`),
-        loader: 'file-loader',
-        type: 'javascript/auto',
-        options: {
-          name: '[name].[ext]',
+        type: 'asset/resource',
+        dependency: { not: [/node_modules/] },
+        generator: {
+          filename: '[name].[ext]',
         },
-        exclude: /node_modules/,
       },
       {
         test: /\.js$/,
@@ -145,8 +144,7 @@ const options = {
     new webpack.ProgressPlugin(),
     // clean the build folder
     new CleanWebpackPlugin({
-      verbose: true,
-      cleanStaleWebpackAssets: true,
+      verbose: false,
     }),
     // expose and write the allowed env vars on the compiled bundle
     new webpack.EnvironmentPlugin(['NODE_ENV']),