webpack.config.babel.js

import child_process from 'child_process';
// import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CSSMinimizer from 'css-minimizer-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import Terser from 'terser-webpack-plugin';
// The copy-webpack-plugin type declaration has no default export
// eslint-disable-next-line import/default
import CopyPlugin from 'copy-webpack-plugin';
import ESLintPlugin from 'eslint-webpack-plugin';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import CompressionPlugin from 'compression-webpack-plugin';
import VersionFile from 'webpack-version-file';
import { gzip } from '@gfx/zopfli';

import { baseConfig, opts, rules } from './webpack/base';
import { skipFalsy } from './webpack/utils';

const config = {
  ...baseConfig,
  entry: {
    app: skipFalsy(['core-js/stable', 'regenerator-runtime/runtime', 'whatwg-fetch', './src']),
    config: skipFalsy(['./config/lib/loader-browser.js']),
  },
  target: 'web',
  devServer: { historyApiFallback: true },
  module: {
    rules: skipFalsy([
      opts.dev && rules.eslint,
      rules.babel,
      rules.css,
      rules.cssModule,
      rules.assetsCss,
      rules.template,
      ...rules.fonts,
      rules.photoswipe,
      rules.markdown,
      rules.otherAssets,
    ]),
  },
  plugins: skipFalsy([
    ...baseConfig.plugins,
    new ESLintPlugin({
      extensions: ['js', 'jsx'],
      files: ['src', 'test'],
      lintDirtyModulesOnly: true,
    }),
    new HtmlWebpackPlugin({
      inject: false,
      template: './index.jade',
      file: 'index.html',
      chunks: ['config', 'common', 'app'],
      chunksSortMode: 'manual',
      publicPath: '/',
      templateParameters: {
        appConfig: global.CONFIG,
        opts,
      },
    }),
    new MiniCssExtractPlugin({
      filename: opts.dev ? '[name]-dev.css' : '[name]-[contenthash].css',
    }),
    new CopyPlugin({
      patterns: skipFalsy([
        'assets/images/favicon.*',
        'assets/images/ios/*.png',
        'assets/ext-auth/auth-return.html',
        opts.dev && { from: 'config.json', noErrorOnMissing: true },
      ]),
    }),
    !opts.dev &&
      new BundleAnalyzerPlugin({
        analyzerMode: 'disabled', // will create 'stats.json' file
        generateStatsFile: true,
        openAnalyzer: false,
      }),
    !opts.dev &&
      new CompressionPlugin({
        compressionOptions: {
          numiterations: 5,
        },
        algorithm(input, compressionOptions, callback) {
          return gzip(input, compressionOptions, callback);
        },
      }),
    !opts.dev &&
      new VersionFile({
        output: `${opts.dstDir}/version.txt`,
        templateString: `<%= name %>@<%= version %> <%= commitHash%>\nBuild date: <%= date %>`,
        data: {
          date: new Date().toISOString(),
          commitHash: child_process.execSync('git rev-parse --short HEAD').toString().trim(),
        },
      }),
  ]),
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: {
      name: 'manifest',
    },
    splitChunks: {
      // maxSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'initial',
          priority: 9,
        },
        default: {
          minChunks: 1,
        },
      },
    },
    minimizer: [new Terser(), new CSSMinimizer()],
  },
};

export default config;