config: build mode => mode by cross-env, devtool

Author: akambetov

package-lock.json

@@ -5,8 +5,8 @@
   "main": "webpack.config.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack",
-    "build": "webpack --mode production"
+    "start": "cross-env NODE_ENV=development webpack",
+    "build": "cross-env NODE_ENV=production webpack --mode production"
   },
   "repository": {
     "type": "git",
@@ -29,6 +29,7 @@
     "@babel/preset-env": "^7.22.10",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "html-webpack-plugin": "^5.5.3",
     "mini-css-extract-plugin": "^2.7.6",

package.json

@@ -4,9 +4,12 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpack = require('webpack');
 
+const isProd = process.env.NODE_ENV === 'production';
+const isDev = !isProd;
+
 module.exports = {
   context: path.resolve(__dirname, 'src'),
-  mode: 'development',
+  mode: isDev ? 'development' : 'production',
   entry: './index.js',
   output: {
     filename: 'bundle.[contenthash].js',
@@ -42,6 +45,10 @@ module.exports = {
     new webpack.ProgressPlugin(),
     new HtmlWebpackPlugin({
       template: 'index.html',
+      minify: {
+        removeComments: isProd,
+        collapseWhitespace: isProd,
+      },
     }),
     new CopyWebpackPlugin({
       patterns: [{ from: 'favicon.ico', to: path.resolve(__dirname, 'dist') }],
@@ -50,4 +57,5 @@ module.exports = {
       filename: 'bundle.[contenthash].css',
     }),
   ],
+  devtool: isDev ? 'source-map' : false,
 };