Webpack 4 base configuration

base-webpack.config.js

const path = require('path');
const webpack = require('webpack');
const chokidar = require('chokidar'); // hot reload for html, webpack-dev-server has include this plugin.
const htmlWebpackPlugin = require('html-webpack-plugin');
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const terserPlugin = require("terser-webpack-plugin"); // minify js
const optimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const cleanWebpackPlugin = require('clean-webpack-plugin');

const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  entry: './index.js',
  output: {
    path: outputPath,
    filename: devMode ? '[name].js' : '[name].[contenthash:8].js',
    publicPath: '/'
  },
  optimization: {
    minimizer: [
      new terserPlugin(),
      new optimizeCSSAssetsPlugin()
    ]
  },
  devServer: {
    before(app, server) {
      // hot reload for html
      chokidar.watch(path.resolve(__dirname, 'index.html')).on('all', function() {
        server.sockWrite(server.sockets, 'content-changed');
      })
    },
    port: 8000,
    hot: true,
    open: true
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'index.html'
    }),
    new miniCssExtractPlugin({
        filename: devMode ? '[name].css' : '[name].[contenthash:8].css',
    }),
    new cleanWebpackPlugin(devMode ? '' : path.resolve(__dirname, './dist')),
    devMode ? new webpack.HotModuleReplacementPlugin() : new webpack.HashedModuleIdsPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.(js)$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          // when on the development mode, using 'style-loader' can hot reload for the related file of CSS type.
          devMode ? 'style-loader' : miniCssExtractPlugin.loader, 
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ]
      },
      {
        test: /\.(html)$/,
        use: ['html-loader']
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 5*1024, // if the file is less 5k size, it will be transform into base64 URIs.
              outputPath: 'images',
              name: devMode ? '[name].[ext]' : '[name].[contenthash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
};

package.json

{
  //...
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "NODE_ENV=production webpack --mode production",
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "autoprefixer": "^9.4.7",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "terser-webpack-plugin": "^1.2.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  }
}