Specify webpack mode production in build script (#3)

DynamoDS · Oct 5, 2022 · d241443 · d241443
1 parent 82f41e2
commit d241443
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 47 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
@@ -21,4 +22,3 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-/dist/build
diff --git a/package.json b/package.json
@@ -7,13 +7,13 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1"    
+    "react-scripts": "5.0.1"
   },
-  "scripts": {    
-    "build": "webpack --config webpack.config.js",
+  "scripts": {
+    "start": "webpack serve --config webpack.config.js",
+    "build": "webpack --config webpack.config.js --mode=production",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "start": "webpack serve --config webpack.config.js"    
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
@@ -38,4 +38,4 @@
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
   }
-}
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -2,45 +2,46 @@ const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 
-module.exports = (env) => {
-    return {
-        mode: 'development',
-        entry: {
-            app: './src/index.js',
+module.exports = () => {
+  return {
+    mode: 'development',
+    entry: {
+      app: './src/index.js',
+    },
+    output: {
+      path: path.join(__dirname, '/dist'),
+      filename: 'index.bundle.js',
+      clean: true,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader'
+          }
         },
-        output: {
-            path: path.join(__dirname, '/dist/build'),
-            filename: 'index.bundle.js',
-            clean: true,
-        },
-        module: {
-            rules: [
-                {
-                    test: /\.(js|jsx)$/,
-                    exclude: /node_modules/,
-                    use: {
-                        loader: 'babel-loader'
-                    }
-                },
-                {
-                    test: /\.css$/,
-                    use: ['style-loader', 'css-loader']
-                }
-            ]
-        },
-        optimization: {
-            minimizer: [
-                new TerserPlugin({
-                    parallel: true,
-                    terserOptions: {
-                    },
-                }),
-            ]
-        },
-        plugins: [
-            new HtmlWebpackPlugin({
-                template: './public/index.html'
-            })
-        ]
-    };
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader']
+        }
+      ]
+    },
+    optimization: {
+      minimize: true,
+      minimizer: [
+        new TerserPlugin({
+          parallel: true,
+          terserOptions: {
+          },
+        }),
+      ]
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: './public/index.html'
+      })
+    ]
+  };
 };