Split webpack files per env

Author: zrpnr

package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "test": "jest",
     "watch": "webpack --watch",
-    "build": "webpack --mode production",
-    "start": "webpack-dev-server --open",
+    "build": "NODE_ENV=production webpack --config webpack.prod.js",
+    "start": "NODE_ENV=development webpack-dev-server --open --config webpack.dev.js",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist"
   },
@@ -45,6 +45,7 @@
     "svg-url-loader": "^2.3.3",
     "webpack": "^4.32.0",
     "webpack-cli": "^3.3.2",
-    "webpack-dev-server": "^3.4.1"
+    "webpack-dev-server": "^3.4.1",
+    "webpack-merge": "^4.2.1"
   }
 }

webpack.common.js

@@ -0,0 +1,74 @@
+const path = require('path');
+const Dotenv = require('dotenv-webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const postcssCustomProperties = require('postcss-custom-properties');
+const autoprefixer = require('autoprefixer');
+
+module.exports = {
+  context: path.resolve(__dirname, "src"),
+  entry: "./index.js",
+
+  output: {
+    filename: "main.js",
+    path: path.join(__dirname, 'dist')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "babel-loader"
+          }
+        ]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              hmr: process.env.NODE_ENV === 'development',
+            },
+          },
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              plugins: () => [
+                postcssCustomProperties(),
+                autoprefixer
+              ]
+            }
+          },
+          'sass-loader'
+        ],
+      },
+      {
+        test: /\.svg/,
+        use: {
+          loader: 'svg-url-loader',
+          options: {}
+        }
+      },
+      {
+        test: /\.(html)$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]'
+          }
+        }
+      }
+    ],
+  },
+  plugins: [
+    new Dotenv(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    }),
+  ]
+};

webpack.config.js

@@ -5,7 +5,7 @@ const postcssCustomProperties = require('postcss-custom-properties');
 const autoprefixer = require('autoprefixer');
 
 module.exports = {
-  context: __dirname + "/src",
+  context: path.resolve(__dirname, "src"),
   entry: "./index.js",
 
   output: {

webpack.dev.js

@@ -0,0 +1,28 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+const path = require('path');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'source-map',
+  devServer: {
+    hot: true,
+    inline: true,
+    index: path.join(__dirname, 'index.html')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "react-hot-loader/webpack"
+          }
+        ]
+      }
+    ]
+  }
+});
+
+console.log('Env is ', process.env.NODE_ENV);

webpack.prod.js

@@ -0,0 +1,6 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+});