配置babel-loader处理JSX语法

在webpack中，JSX语法是不被webpack识别的，webpack默认只能处理.js后缀名的文件，需要安装第三方loader处理非js文件。

而JSX语法，可以使用babel-loader处理。

一开始参照官网配置，但是报错信息显示还是不能识别JSX语法，错误配置是这样的：

• 安装

npm install -D babel-loader @babel/core @babel/preset-env

• 配置webpack.config.js

module: { // 所有第三方模块的匹配规则， webpack默认只能处理.js后缀名的文件，需要安装第三方loader
        rules: [
            {
                test: /\.m?js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                },
                exclude: /(node_modules|bower_components)/, // 千万别忘记添加exclude选项,不然运行可能会报错
            }, 
        ]
    }

• 配置.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-proposal-object-rest-spread"]
  }

查了网上的一些解决办法，并自己摸索了一下，需要再安装@babel/preset-react，并修改.babelrc的配置。

最终正确的webpack 4.x版本babel-loader对应配置如下，如果不对应版本进行配置，会出现很多问题。

• 安装

  npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react

• 配置webpack.config.js

  module: { // 所有第三方模块的匹配规则， webpack默认只能处理.js后缀名的文件，需要安装第三方loader
          rules: [
              {
                  test: /\.m?js$/,
                  use: {
                      loader: 'babel-loader',
                      options: {
                          presets: ['@babel/preset-env']
                      }
                  },
                  exclude: /(node_modules|bower_components)/, // 千万别忘记添加exclude选项,不然运行可能会报错
              }, 
          ]
      }

   

• 配置.babelrc文件

  在项目根目录下新建.babelrc文件，并配置如下

  { "presets":["@babel/react","@babel/env"]}