React Babel无法解析箭头功能，显示目录而不是应用程序

Question

我很困惑为什么这不起作用。我添加了babel-loader和所有插件。但我不断收到此错误：

ERROR in ./src/index.js 5:9
Module parse failed: Unexpected token (5:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| const App = () => {
>   return <div> <h1>Hi!</h1></div>;
| };
| 
ℹ ｢wdm｣: Failed to compile.

我的包裹：

  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-transform-arrow-functions": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.3"
  }

App.js：

import React from 'react';
import { render } from 'react-dom';

const App = () => {
  return <div> <h1>Hi!</h1></div>;
};


render(< App />, document.getDocumentById('root'));

。Babelrc：

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

Webpack.config.js：

const HtmlWebPackPlugin = require（“ html-webpack-plugin”）;

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

Answer 1

当然，捆绑程序看不到您的预设，所以我猜想它是由于babel文件命名错误而发生的。在问题中，您输入.Babelrc，但其名称应为.babelrc，这样，在装入加载程序后，打包程序将无法打包，因此babel-loader找不到预设。同样，这不是将预设放入Webpack配置文件中的唯一方法，如下所示：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { // ↓↓↓ here is the preset configs
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

或者您可以将其添加到package.json文件中，如下所示：

"dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
"devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-transform-arrow-functions": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.3"
  },
"presets": ["@babel/preset-env", "@babel/preset-react"]

希望这篇文章对您有所帮助。如果第一部分不正确，请告诉我忽略它。