webpack.config.production.js

const UglifyJs = require('uglifyjs-webpack-plugin');
const Clean = require('clean-webpack-plugin');
const Copy = require('copy-webpack-plugin');
const CSS = require('mini-css-extract-plugin');
const HTML = require('html-webpack-plugin');

const configureBabelLoader = () => ({
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader'
  }
});

const configureCssLoader = () => ({
  test: /\.css$/,
  use: [
    CSS.loader,
    {
      loader: 'css-loader',
      options: {
        import: true,
        importLoaders: 1,
        localIdentName: '[name]__[local]__[hash:base64:5]',
        modules: true,
        sourceMap: true
      }
    }
  ]
});

const configurePostCssLoader = () => ({
  test: /\.scss$/,
  exclude: /node_modules/,
  use: [
    CSS.loader,
    {
      loader: 'css-loader',
      options: {
        import: true,
        importLoaders: 2,
        localIdentName: '[name]__[local]__[hash:base64:5]',
        modules: true,
        sourceMap: true
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: true
      }
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true
      }
    }
  ]
});

const configureHtmlLoader = () => ({
  test: /\.(html|htm)$/,
  use: {
    loader: 'html-loader',
    options: {
      minimize: false
    }
  }
});

const production = {
  devtool: 'sourcemap',
  mode: 'production',
  module: {
    rules: [
      configureBabelLoader(),
      configureCssLoader(),
      configurePostCssLoader(),
      configureHtmlLoader()
    ]
  },
  plugins: [
    new CSS({
      filename: 'assets/css/[name].css',
      chunkFilename: 'assets/css/[id].css'
    }),
    new Clean(['dist'], { root: __dirname }),
    new Copy([{ from: `${__dirname}/src/assets`, to: `${__dirname}/dist/assets` }]),
    new HTML({
      chunkSortMode: 'dependency',
      favicon: `${__dirname}/src/assets/img/favicon.ico`,
      filename: 'index.html',
      hash: true,
      inject: 'body',
      template: `${__dirname}/src/index.html`,
      sourceMap: true
    })
  ],
  optimization: {
    runtimeChunk: true,
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    },
    minimizer: [
      new UglifyJs({
        cache: true,
        parallel: true,
        sourceMap: true
      })
    ]
  },
  output: {
    path: `${__dirname}/dist`,
    filename: '[name].[chunkhash:8].js'
  }
};

module.exports = production;