webpack-react-template/webpack.config.js at main · narukeu/webpack-react-template · 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
import { resolve, dirname, join } from "node:path";
import { fileURLToPath } from "node:url";
import HtmlWebpackPlugin from "html-webpack-plugin";
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

export default (env, argv) => {
  const isProduction = argv.mode === "production";

  return {
    entry: "./src/main.tsx",
    resolve: {
      alias: {
        "@": resolve(__dirname, "src")
      },
      extensions: [".tsx", ".ts", ".js", ".jsx"],
      exportsFields: ["exports"],
      importsFields: ["imports"],
      conditionNames: ["import", "require", "node", "default"]
    },
    output: {
      path: resolve(__dirname, "dist"),
      filename: isProduction ? "[name].[contenthash].js" : "[name].js",
      clean: true
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx|ts|tsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: [
                "@babel/preset-env",
                ["@babel/preset-react", { runtime: "automatic" }],
                "@babel/preset-typescript"
              ],
              plugins: [
                "@babel/plugin-transform-runtime",
                ...(isProduction ? [] : ["react-refresh/babel"])
              ]
            }
          }
        },
        {
          test: /\.html$/i,
          loader: "html-loader"
        },
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"]
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: "asset/resource"
        },
        {
          test: /\.(mp3|wav|ogg|flac|aac)$/i,
          type: "asset/resource"
        },
        {
          test: /\.json$/,
          type: "json"
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({ template: "./public/index.html" }),
      ...(isProduction ? [] : [new ReactRefreshWebpackPlugin()])
    ],
    devServer: {
      port: 3000,
      static: {
        directory: join(__dirname, "public")
      },
      compress: true,
      hot: true,
      historyApiFallback: true
    },
    optimization: {
      splitChunks: {
        chunks: "all"
      }
    },
    devtool: isProduction ? false : "source-map"
  };
};