使用 webpack 无法解析 jsx 语法 Module build failed

报错信息

大概意思：模块构建失败，无法解析 jsx.

Module build failed: SyntaxError: /Users/yiming/Desktop/ReactTest/webpack2/app/main.js: Unexpected token

webpack@v4 设置：

webpack.config.js:

module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/react", "@babel/preset-env"]
          }
        }
      }
    ]
  },

所依赖项的版本：
package.js:

"devDependencies": {
    "@babel/cli": "^7.7.7",
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.3.10"
  },

下载：
npm install -D @babel/core @babel/preset-env babel-loader webpack

webpack@v3 设置

webpack.config.js:

module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env", "react"]
          }
        }
      },
}

package.json:

"devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "webpack": "3.10.0",
    "webpack-dev-server": "2.9.7"
  },

来源：CSDN

作者：大涛子

链接：https://blog.csdn.net/qq_42840269/article/details/103730019