nestjs_react_mobx_starter/webpack.config.js at main · ixrock/nestjs_react_mobx_starter · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const packageJson = require("./package.json");

module.exports = function webpackConfig() {
  const isProduction = process.env.NODE_ENV === "production";
  const isDevelopment = !isProduction;
  const entryFile = path.resolve(__dirname, "client/main.tsx");
  const distFolderPath = path.resolve(__dirname, "dist/client");

  return {
    target: "web",
    devtool: isDevelopment ? "source-map" : false, // https://webpack.js.org/configuration/devtool/
    mode: isDevelopment ? "development" : "production",
    cache: isDevelopment ? { type: "filesystem" } : false,
    entry: {
      "app": entryFile
    },
    output: {
      globalObject: "globalThis",
      publicPath: "/",
      path: distFolderPath,
      filename: "[name].js",
      chunkFilename: "chunks/[name].js",
      assetModuleFilename: `assets/[name][ext][query]`
    },

    experiments: {
      topLevelAwait: true
    },

    optimization: {
      minimize: isProduction
    },

    resolve: {
      extensions: [".ts", ".tsx", ".js", ".json", ".scss", ".css", ".txt", ".md"],
      alias: {
        "@": path.resolve(__dirname, "client"),
        "#": path.resolve(__dirname, "server")
      },
      fallback: {
        // ignore browser polyfill warnings
        crypto: false,
        path: false
      }
    },

    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: {
            loader: "ts-loader",
            options: {
              transpileOnly: false
            }
          }
        },

        /**
         * CSS modules support (*.module.css)
         */
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                sourceMap: isDevelopment,
                modules: {
                  auto: /\.module\./i, // https://github.com/webpack-contrib/css-loader#auto
                  mode: "local", // :local(.selector) by default
                  localIdentName: "[name]__[local]--[hash:base64:5]"
                }
              }
            }
          ]
        },

        /**
         * Import icons and image files.
         * Read more about asset types: https://webpack.js.org/guides/asset-modules/
         */
        {
          test: /\.svg$/,
          type: "asset/inline" // data:image/svg+xml;base64,...
        },
        {
          test: /\.(jpg|png|ico)$/,
          type: "asset/resource" // path to bundled file, e.g. "/assets/*"
        },

        /**
         * Import custom fonts as URL.
         */
        {
          test: /\.(ttf|eot|woff2?)$/,
          type: "asset/resource"
        },

        /**
         * Import raw "plain/text" resources
         */
        {
          test: /\.(txt|md|ftl)$/,
          type: "asset/source"
        }
      ]
    },

    plugins: [
      new HtmlWebpackPlugin({
        title: packageJson.description,
        inject: true
      }),
      new MiniCssExtractPlugin({ filename: "[name].css" })
    ]
  };
};