配置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"]}