remove webpack.config.js, create two separate configs for production …

…and development

webpack.config.js → webpack.common.js

@@ -2,33 +2,27 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-  entry: 'src/index.js',
+  entry: './src/index.js',
   output: {
-    filename: 'main.js',
     path: path.resolve(__dirname, 'dist'),
-    publicPath: './'
+    filename: 'main.js'
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
-        use: 'babel-loader'
+        test: /\.m?js$/,
+        exclude: /(node_modules)/,
+        loader: 'babel-loader'
       },
       {
-        test: /\.(png|svg|jpg|gif)$/,
-        use: 'file-loader'
+        test: /\.(png|jpe?g|gif)$/,
+        use: ['file-loader']
       }
     ]
   },
   plugins: [
     new HtmlWebpackPlugin({
       template: 'index.html'
     })
-  ],
-  mode: 'development',
-  devServer: {
-    historyApiFallback: true,
-    overlay: true,
-    stats: 'minimal'
-  }
+  ]
 };

webpack.dev.js

@@ -0,0 +1,12 @@
+const common = require('./webpack.common');
+const webpackMerge = require('webpack-merge');
+
+module.exports = webpackMerge(common, {
+  mode: 'development',
+  devServer: {
+    historyApiFallback: true,
+    overlay: true
+  },
+  stats: 'minimal',
+  devtool: 'cheap-module-eval-source-map'
+});

webpack.prod.js

@@ -0,0 +1,44 @@
+const common = require('./webpack.common');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const webpackMerge = require('webpack-merge');
+
+module.exports = webpackMerge(common, {
+  mode: 'production',
+  optimization: {
+    minimize: true
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react']
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/,
+        use: [
+          'file-loader',
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              mozjpeg: {
+                progressive: true,
+                quality: 65
+              }
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [new CleanWebpackPlugin()]
+});