Webpack Config Starter

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties"
  ]
}

.browserslistrc

> 1%
last 2 versions
Firefox ESR

postcss.config.js

const autoprefixer = require("autoprefixer");

module.exports = {
  plugins: [autoprefixer]
};

webpack.common.js

const path = require("path");
const isProd = process.env.NODE_ENV === "production";

const SRC_DIR = path.resolve(__dirname, "src");
const BUILD_DIR = path.resolve(__dirname, "dist");
const ENTRY_POINT = "index.tsx";

module.exports = {
  // Webpack outputs a file called `main` for single entry points
  entry: path.join(SRC_DIR, ENTRY_POINT),
  // Limit the amount of information shown during the build
  stats: "minimal",
  output: {
    path: BUILD_DIR,
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.(m?)js(x?)$/,
        exclude: /(node_modules|bower_components)/,
        // babel-loader uses the `.babelrc` file in the project root
        use: { loader: "babel-loader" }
      },
      {
        test: /\.ts(x?)$/,
        exclude: /(node_modules|bower_components)/,
        // ts-loader uses the `tsconfig.json` file in the project root
        use: [{ loader: "ts-loader" }]
      },
      {
        test: /\.(jp(e?)g|png|gif|svg)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[hash:5].[ext]"
            }
          }
        ]
      }
    ]
  },
  resolve: {
    // Update the file types that can be resolved by Webpack
    extensions: [".ts", ".tsx", ".js", ".jsx", ".scss", ".css"]
  }
};

webpack.dev.js

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

const SRC_DIR = path.resolve(__dirname, "src");
const BUILD_DIR = path.resolve(__dirname, "dist");
const HTML_TEMPLATE = "index.html";
const { PORT } = process.env;

module.exports = merge(common, {
  mode: "development",
  devtool: "inline-source-map",
  devServer: {
    // Serve content from this directory
    contentBase: BUILD_DIR,
    // Enable HMR
    hot: true,
    // Enable gzip compression for everything served
    compress: true,
    // Supress the extensive stats normally printed after a dev build
    stats: "minimal",
    // Suppress forwarding of Webpack logs to the browser console
    clientLogLevel: "none",
    port: PORT || 8000,
    // Request that paths not ending in a file extension serve index.html
    historyApiFallback: true,
    // Don't embed an error overlay into the client bundle
    overlay: false
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          // Inject CSS into a <style> tag
          "style-loader",
          // Translate CSS into CommonJS (add options to enable CSS Modules)
          "css-loader",
          // Transform CSS with PostCSS
          "postcss-loader",
          // Compile Sass to CSS, using `node-sass` by default
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    // Inject bundled assets into the `HTML_TEMPLATE`
    new HtmlWebpackPlugin({
      template: path.join(SRC_DIR, HTML_TEMPLATE)
    }),
    // Enable HMR
    new webpack.HotModuleReplacementPlugin()
  ]
});

webpack.prod.js

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const common = require("./webpack.common.js");
const glob = require("glob");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const merge = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const path = require("path");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const PurgecssPlugin = require("purgecss-webpack-plugin");
const TerserJSPlugin = require("terser-webpack-plugin");
const webpack = require("webpack");

const SRC_DIR = path.resolve(__dirname, "src");
const BUILD_DIR = path.resolve(__dirname, "dist");
const HTML_TEMPLATE = "index.html";

module.exports = merge(common, {
  mode: "production",
  devtool: "source-map",
  output: {
    path: BUILD_DIR,
    filename: "[name].[chunkhash:5].js"
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          // Translate CSS into CommonJS (add options to enable CSS Modules)
          "css-loader",
          // Transform CSS with PostCSS
          "postcss-loader",
          // Compile Sass to CSS, using `node-sass` by default
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    // Remove contents of the `BUILD_DIR` directory before each build
    new CleanWebpackPlugin(),
    // Show a pretty progress bar showing build progress
    new ProgressBarPlugin({
      format: `\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m\r`,
      renderThrottle: 100,
      summary: false,
      clear: true
    }),
    // Inject bundled assets into the `HTML_TEMPLATE`
    new HtmlWebpackPlugin({
      // Include the below to pre-render the app (https://github.com/GoogleChromeLabs/prerender-loader)
      template: `!!prerender-loader?string!${path.join(
        SRC_DIR,
        HTML_TEMPLATE
      )}`,
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      }
    }),
    // Fingerprint the extracted stylesheet during production builds
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash:5].css",
      chunkFilename: "[name].[contenthash:5].css"
    }),
    // Remove unused selectors from the CSS; may necessitate maintaining a selector whitelist
    new PurgecssPlugin({
      paths: glob.sync(path.join(SRC_DIR, "**/*"), { nodir: true })
    }),
    // Output module size analysis to `BUILD_DIR/report.html`
    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      defaultSizes: "gzip",
      openAnalyzer: false
    }),
    // Fix content-based hashing: https://webpack.js.org/guides/caching#module-identifiers
    new webpack.HashedModuleIdsPlugin()
  ],
  optimization: {
    // Minify JS and CSS
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    // Output a separate bundle containing only the Webpack runtime
    runtimeChunk: "single",
    // Output a separate bundle containing only vendor code
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all"
        }
      }
    }
  }
});