React项目配置Webpack报错：需合适loader处理对应文件类型

Webpack配置是标准JavaScript对象，对象中出现同名属性时，后定义的属性值会直接覆盖先定义的值。
你的配置里先后写了两个module字段：第一个module里配置了用来转译JS/JSX语法的babel-loader规则，第二个module里只配置了CSS、图片静态资源的处理规则。最终构建时第一个module的配置完全被覆盖，没有任何loader负责解析JSX语法，所以解析到<React.StrictMode>这类JSX标签时就会抛出「Unexpected token」的解析错误。

另外配置还有两个小隐患：

• babel-loader的匹配正则是/\.?js$/，无法匹配.jsx后缀的文件，后续写.jsx后缀的组件时同样会触发解析错误
• 静态资源规则里重复写了两次svg文件的file-loader匹配规则，属于冗余配置

• 合并两个module字段下的rules规则，只保留一个module配置项
• 修改babel-loader的test正则为/\.(js|jsx)$/，同时支持.js和.jsx后缀文件的转译
• 删除重复的svg文件处理规则

修复后的完整webpack.config.js参考如下：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
        ],
      },
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: ["file-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }),
    new MiniCssExtractPlugin(),
  ],
  resolve: {
    extensions: [".js", ".jsx"],
  },
};

改完配置后重启本地开发服务，报错就会消失。如果还是提示babel相关错误，可以检查对应依赖是否已经正确安装，需要提前安装的依赖包括@babel/core、babel-loader、@babel/preset-env、@babel/preset-react。

内容的提问来源于stack exchange，提问作者RRR uzumaki