react babel-loader 8.x配置

babel-loader 8.x配置

8.x中各个包的名字变了，都以@符号开头。以前每个包在node_modules目录下都是一个独立的文件夹；现在则在node-modules目录下有个叫“@babel”的目录，这里要安装的所有babel包，都在这个@babel目录下保存。

先安装需要的包

npm intall @babel/core @babel/preset-env @babel/plugin-transform-runtime -D

npm intall @babel/plugin-proposal-class-properties babel-lodaer -D

在根目录创建 .babelrc

复制下面代码

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-transform-runtime",
      "@babel/plugin-proposal-class-properties"
    ]
  }

在webpack.config.js中加入

module: {
          rules: [
               { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
          ]
     }

注：babel-loader8.x中不要babel-preset-stage-0这个包
不然会有以下报错

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js)