build: improve webpack config

package.json

@@ -40,14 +40,14 @@
     "mini-css-extract-plugin": "^1.3.9",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
+    "source-map-loader": "^2.0.1",
     "webpack": "^5.27.0",
-    "webpack-bundle-analyzer": "^4.4.0",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2"
   },
   "scripts": {
     "start": "webpack serve",
-    "build": "rm -rf build && webpack --mode=production -json > stats.json",
+    "build": "rm -rf build && webpack --mode=production",
     "chrome": "cp manifest/chrome.json build/manifest.json",
     "firefox": "cp manifest/firefox.json build/manifest.json",
     "opera": "cp manifest/opera.json build/manifest.json && cp manifest/background-opera.js build/"

webpack.config.js

@@ -6,6 +6,9 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 module.exports = {
   entry: path.resolve(__dirname, './src/index.js'),
   mode: 'development',
+  performance: {
+    hints: false
+  },
   module: {
     rules: [{
       test: /\.(js|jsx)$/,
@@ -22,14 +25,19 @@ module.exports = {
           },
         },
         'css-loader',
-        'sass-loader',
+        'sass-loader'
       ],
     },
     {
       test: /\.(woff|woff2|svg)$/,
       use: {
-        loader: 'file-loader',
+        loader: 'file-loader'
       }
+    },
+    {
+      test: /\.js$/,
+      enforce: 'pre',
+      use: ['source-map-loader']
     }]
   },
   resolve: {
@@ -37,7 +45,7 @@ module.exports = {
   },
   output: {
     path: path.resolve(__dirname, './build'),
-    filename: 'bundle.js',
+    filename: 'bundle.js'
   },
   devServer: {
     contentBase: path.resolve(__dirname, './build'),
@@ -56,12 +64,12 @@ module.exports = {
         {
           from: 'public/offline-images',
           to: 'offline-images'
-        },
+        }
-      ],
+      ]
     }),
     new MiniCssExtractPlugin({
       filename: '[name].css',
-      chunkFilename: '[id].css',
+      chunkFilename: '[id].css'
     })
   ]
 };