ebermergen-td/webpack.config.js

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  .BundleAnalyzerPlugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const WebpackBar = require('webpackbar')

module.exports = (env, argv) => {
  const isEnvProduction = argv.mode === 'production'
  const isEnvDevelopment = argv.mode === 'development'

  return {
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'static/js/[name].[contenthash:8].js',
      chunkFilename: 'static/js/[name].[contenthash:8].chunk.js'
    },
    devtool: isEnvProduction ? 'source-map' : 'cheap-module-source-map',
    module: {
      rules: [
        // process javascript with babel
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        // process css. css modules are enabled.
        {
          test: /\.css$/,
          use: [
            isEnvDevelopment && 'style-loader',
            isEnvProduction && MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                modules: {
                  localIdentName: isEnvProduction
                    ? '[hash:base64]'
                    : '[path][name]__[local]'
                }
              }
            },
            'postcss-loader'
          ].filter(Boolean)
        }
      ]
    },
    optimization: {
      minimize: isEnvProduction,
      splitChunks: {
        chunks: 'all',
        name: false
      },
      runtimeChunk: {
        name: entrypoint => `runtime-${entrypoint.name}`
      }
    },
    plugins: [
      // creat an index.html
      new HtmlWebpackPlugin(),
      // show a progress bar
      new WebpackBar(),
      // create a report.html for bundle size
      // extract css to css files
      isEnvProduction &&
        new MiniCssExtractPlugin({
          filename: 'static/css/[name].[contenthash:8].css',
          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css'
        }),
      // use cssnano to minify css
      isEnvProduction &&
        new OptimizeCssAssetsPlugin({
          cssProcessorOptions: {
            map: { inline: false, annotation: true }
          }
        }),
      isEnvProduction &&
        new BundleAnalyzerPlugin({
          analyzerMode: 'static',
          openAnalyzer: false
        })
      // hot reload not working right now
      // isEnvDevelopment &&
      // new ReactRefreshWebpackPlugin({ disableRefreshCheck: true })
    ].filter(Boolean),
    devServer: {
      stats: 'minimal'
    }
  }
}