使用 jsx 编译安装 webpack 时出错

Question

我安装了 webpack，这是我的 webpack.config

 const path = require('path');
const HtmlWebPackPlugin = require('html-webpack- 
 plugin');
const MiniCssExtractPlugin = require('mini-css-extract- 
 plugin');
module.exports ={
mode:'development',
entry:'./src/scripts/app.js',
output:{path: path.resolve(__dirname,'dist') , 
filename:'bundle.js'},
module:{rules:[
    {
        test:/\.jsx?/i,
        exclude:/node_modules/i,
        use:{
            loader:'babel-loader',
            options:{
                presets:['@babel/preset-env']
            }
        }

  },
  {
    test:/\.s?css?/i,
    use:[
        {
            loader:MiniCssExtractPlugin.loader,
            options:{
                publicPath:'/dist'
            }
        },
        'css-loader',
        'sass-loader'
    ]
  }
 ]},
 plugins:[
    new HtmlWebPackPlugin({
        template:'./src/index.html',
        filename:'index.html'
    }),
    new MiniCssExtractPlugin({
        filename:'main.css'
    })
  ]
   }

这是我的 package.json

    {
 "name": "webp",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "test",
 "build": "webpack"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.3.1",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3"
 },
"dependencies": {
"react": "^16.8.1",
"react-dom": "^16.8.1"
}
}

但它无法编译 jsx 。给我这个错误

     class myHeading extends React.Component{
     6 |     render(){
  >  7 |         return <h1> A header will be rendered 
                            here</h1>
       |                ^
     8 |     }
     9 | }
    10 | 

我和我的朋友在我们的课程中遵循相同的路径，他们安装它没有问题，但我不知道我的安装有什么问题。 任何人都可以帮助我吗？将不胜感激。

Answer 1

您需要 @babel/preset-react 才能转译 jsx。您可以使用 NPM 或 Yarn 使用以下脚本安装它：

# NPM
npm i -D @babel/preset-react
# Yarn
yarn add -D @babel/preset-react

您还需要将预设添加到您的 babel 加载器，如下所示：

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "development",
  entry: "./src/scripts/app.js",
  output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js" },
  module: {
    rules: [
      {
        test: /\.jsx?/i,
        exclude: /node_modules/i,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      },
      {
        test: /\.s?css?/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "/dist"
            }
          },
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "main.css"
    })
  ]
};