React项目使用Webpack打包生成dist时报Module parse failed错误如何解决

你的Webpack配置没有配置处理JSX语法的转换工具，无法识别React代码中的JSX标签，因此打包时触发语法错误，按以下步骤修复即可：

修复步骤 #

• 第一步：安装Babel相关依赖，用于转换JSX和ES6+语法
  执行以下命令：

  npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev
  

• 第二步：修改webpack.config.js配置，添加JS/JSX文件的处理规则
  修改后的完整配置如下：

  const path = require('path');
  
  module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        }
      ]
    },
    resolve: {
      extensions: ['.js', '.jsx']
    }
  };
  

• 第三步：在项目根目录新建Babel配置文件.babelrc，添加如下配置：

  {
    "presets": [
      "@babel/preset-env",
      ["@babel/preset-react", {
        "runtime": "automatic"
      }]
    ]
  }
  

配置完成后重新执行npm run builder即可正常打包生成dist目录和对应产物。

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