react-accelerator-micro-fe/webpack.config.js at master · vsakaria/react-accelerator-micro-fe · 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
/* eslint-disable @typescript-eslint/no-var-requires */
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpackMerge = require("webpack-merge");
const modeConfig = mode => require(`./build-utils/webpack.${mode}.js`)(mode);
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = (
  { mode } = {
    mode: ""
  }
) => {
  return webpackMerge(
    {
      mode,
      plugins: [
        new HtmlWebpackPlugin({
          template: "./public/index.html",
          filename: "index.html",
          hash: true
        }),
        new CompressionPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: /\.(ts|tsx|js|css|html|svg)$/,
          threshold: 10240,
          minRatio: 0.8
        }),
        new CompressionPlugin({
          filename: "[path].br[query]",
          algorithm: "brotliCompress",
          test: /\.(ts|tsx|js|css|html|svg)$/,
          compressionOptions: { level: 11 },
          threshold: 10240,
          minRatio: 0.8
        })
      ],
      entry: ["./src/index.tsx"],
      output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
      },
      externals: {
        react: "React",
        "react-dom": "ReactDOM"
      },
      module: {
        rules: [
          {
            test: /\.(ts|tsx)$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            query: {
              presets: [
                "@babel/preset-env",
                "@babel/react",
                "@babel/preset-typescript"
              ],
              plugins: ["transform-class-properties"]
            }
          },
          {
            test: /\.css$/,
            use: [
              "style-loader",
              {
                loader: "css-loader",
                options: {
                  importLoaders: 1,
                  modules: true
                }
              }
            ],
            include: /\.module\.css$/
          },
          {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
            exclude: /\.module\.css$/
          },
          {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: "url-loader?limit=100000"
          }
        ]
      },
      resolve: {
        extensions: [".js", ".jsx", ".tsx", ".ts", ".json"]
      }
    },
    modeConfig(mode)
  );
};