Webpack v4 config - separated dev and prod

webpack.common.js

"use strict";

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production";

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],

  output: {
    filename: "js/bundle-[hash].js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/"
  },

  resolve: {
    // priority of lookup -> left to right
    modules: ["src", "node_modules"]
  },

  module: {
    rules: [
      {
        test: /(\.js)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              url: true
            }
          },
          "resolve-url-loader",
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "sass-resources-loader",
            options: {
              resources: ["src/components/app/_config.scss"]
            }
          }
        ]
      },
      {
        test: /\.(jpeg|jpg|gif|png)$/i,
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "images/",
          publicPath: "images/"
        }
      },
      {
        test: /\.(eot|otf|svg|ttf|woff|woff2)$/i,
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "fonts/",
          publicPath: "fonts/"
        }
      }
    ]
  },

  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),

    new HtmlWebpackPlugin({
      title: "LEEP",
      template: "templates/index.ejs",
      favicon: "favicon.ico"
    }),

    new MiniCssExtractPlugin({
      filename: devMode ? "[name].css" : "[name].[hash].css",
      chunkFilename: devMode ? "[id].css" : "[id].[hash].css"
    })
  ]
};

webpack.dev.js

const merge = require("webpack-merge");
const common = require("./webpack.common.js");
const path = require("path");

const apiUrl = "http://localhost:3000";

module.exports = merge(common, {
  devtool: "source-map",

  mode: "development",

  devServer: {
    contentBase: path.resolve(__dirname, "dist"),
    historyApiFallback: true,
    compress: true,
    publicPath: "/",
    proxy: {
      "/v1": {
        target: apiUrl,
        secure: false
      },
      "/excel_file_formats": {
        target: apiUrl,
        secure: false
      }
    }
  }
});

webpack.prod.js

const merge = require("webpack-merge");
const common = require("./webpack.common.js");

const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = merge(common, {
  mode: "production",

  plugins: [
    new CleanWebpackPlugin(["dist"]),

    new UglifyJSPlugin(),

    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.(css|js|html)$/,
      minRatio: 0.4
    })
  ]
});