TDF_I4/webpack.config.ts at main · elliehoshi/TDF_I4 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
import DuplicatedCheckerPlugin from 'duplicate-package-checker-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import TerserPlugin from 'terser-webpack-plugin';
import WorkboxPlugin from 'workbox-webpack-plugin';
import path from 'path';

module.exports = (env: { production: boolean }) => ({
  mode: env.production ? 'production' : 'development',
  devtool: env.production ? 'source-map' : 'eval',
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    static: './build',
    compress: true,
    allowedHosts: 'all',
  },
  target: 'web',
  entry: './frontend/index.tsx',
  output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: path.join(__dirname, 'build'),
    publicPath: '/',
    clean: true,
  },
  resolve: { extensions: ['.tsx', '.jsx', '.ts', '.js', '.json'] },
  optimization: {
    emitOnErrors: false,
    moduleIds: 'deterministic',
    minimize: true,
    minimizer: env.production
      ? [
          new TerserPlugin({
            extractComments: true,
            parallel: true,
            terserOptions: {
              mangle: true,
              ecma: 2017,
              safari10: true,
              compress: { hoist_funs: true, passes: 2 },
            },
          }),
          new CssMinimizerPlugin(),
        ]
      : [],
  },
  stats: { colors: true },
  performance: { hints: env.production ? 'warning' : false },
  module: {
    rules: [
      {
        test: /\.css$/i,
        include: [
          path.join(__dirname, 'frontend'),
          path.join(__dirname, 'node_modules'),
        ],
        use: [
          { loader: MiniCssExtractPlugin.loader, options: { esModule: true } },
          {
            loader: 'css-loader',
            options: { sourceMap: false, importLoaders: 1 },
          },
        ],
      },
      {
        test: /\.tsx?$/i,
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader', options: { cacheDirectory: true } },
          {
            loader: '@linaria/webpack-loader',
            options: {
              sourceMap: false,
              cacheDirectory: path.join(
                __dirname,
                'node_modules/.cache/linaria'
              ),
            },
          },
        ],
      },
    ],
  },
  plugins: (env.production
    ? [new WorkboxPlugin.GenerateSW({ inlineWorkboxRuntime: true })]
    : [new DuplicatedCheckerPlugin()]
  ).concat(
    new MiniCssExtractPlugin({
      filename: env.production ? '[name].[contenthash:8].css' : '[name].css',
      chunkFilename: env.production ? '[id].[contenthash:8].css' : '[id].css',
      ignoreOrder: true,
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      templateContent:
        '<html><head><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"></head><body><div id="root"></div><div id="container"><div id="prev"></div><div id="fullscreen"></div><div id="next"></div></div></body></html>',
    })
  ),
});