IQuestLab.github.io/webpack.config.cjs at main · IQuestLab/IQuestLab.github.io · 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
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = (env, argv) => {
  return {
    entry: path.resolve(__dirname, "src/main.jsx"),
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "assets/app.[contenthash].js",
      clean: true,
      // 开发/生产都使用相对路径：便于把 dist 放到任意子目录/相对路径下直接访问
      publicPath: "./",
    },
    resolve: {
      extensions: [".js", ".jsx"],
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  {
                    targets: "defaults",
                  },
                ],
                ["@babel/preset-react", { runtime: "automatic" }],
              ],
            },
          },
        },
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "public/index.html"),
        inject: "body",
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            // 复制版本详情页目录到 dist/release-1.0-2603/*
            from: path.resolve(__dirname, "src/release-1.0-2603/**/*"),
            context: path.resolve(__dirname, "src"),
            to: path.resolve(__dirname, "dist/[path][name][ext]"),
            noErrorOnMissing: true,
          },
          {
            from: path.resolve(__dirname, "src/assets"),
            to: path.resolve(__dirname, "dist"),
            // public 下的内容都要原样可访问：/images/*、/demo/*、/style.css
            noErrorOnMissing: true,
          },
          {
            from: path.resolve(
              __dirname,
              "c952af0ffb79dabbf56fa8e837213e97.txt"
            ),
            to: path.resolve(
              __dirname,
              "dist/c952af0ffb79dabbf56fa8e837213e97.txt"
            ),
            noErrorOnMissing: true,
          },
        ],
      }),
    ],
    devServer: {
      host: "0.0.0.0",
      port: 4000,
      hot: true,
      historyApiFallback: true,
      // 允许通过 IP/域名远程访问，否则会报 Invalid Host header
      allowedHosts: "all",
      // output.publicPath 使用相对路径时，devMiddleware 仍需要一个可路由匹配的绝对挂载点，
      // 否则会出现 Cannot GET /（所有资源都 404）的情况。
      devMiddleware: {
        publicPath: "/",
      },
      static: [
        {
          // 让 /release-1.0-2603/* 直接映射到 src/release-1.0-2603/*
          directory: path.resolve(__dirname, "src/release-1.0-2603"),
          publicPath: "/release-1.0-2603",
          watch: true,
        },
        {
          // 让 /images/*、/demo/*、/style.css 直接从 src/assets 提供
          directory: path.resolve(__dirname, "src/assets"),
          publicPath: "/",
          watch: true,
        },
      ],
      client: {
        overlay: true,
      },
    },
    devtool: "source-map",
  };
};