@dztools/webpack-config-react/config/webpack.prod.js

Webpack base, dev, and prod configurations for React + JavaScript templates.

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin: CleanPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

const ROOT_DIR = fs.realpathSync(process.cwd());
const BUILD_DIR = path.resolve(ROOT_DIR, 'dist');

const plugins = [
  new CleanPlugin(),
  new CssMinimizerPlugin(),
  new MiniCssExtractPlugin({
    filename: path.join('css', '[name].[contenthash].min.css')
  }),
  new webpack.optimize.AggressiveMergingPlugin()
];

if (process.argv.indexOf('--report') !== -1) {
  plugins.push(new BundleAnalyzerPlugin());
}

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  performance: {
    hints: false
  },
  plugins,
  optimization: {
    minimize: true,
    splitChunks: {
      chunks: 'all',
      name: false
    },
    runtimeChunk: true
  },
  output: {
    path: BUILD_DIR,
    publicPath: '/',
    filename: path.join('js', '[name].[chunkhash].min.js'),
    chunkFilename: path.join('js', '[name].[chunkhash].min.js')
  }
};