JSX：你可能需要一个合适的加载器来处理这种文件类型

Question

正在尝试配置我的构建环境以使用以下内容解析 React 和 JSX。但是我得到了可怕的 "You may need an appropriate loader to handle this file type":

wp.js

class Welcome extends React.Component {
  render() {
    return <h1>Hello World from React boilerplate</h1>;
  }
}

ReactDOM.render(<Welcome />, document.getElementById('root'));

index.js

import React from 'react'
import ReactDOM from 'react-dom';
import './wp.js';

webpack.config.js

....
{
        test: /js\\.*js$/,
        use:
        [
            {
                loader:'script-loader'
            },
            {
                loader:'babel-loader'
            }
        ]
}
....

package.json

....
"devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.4.7",
    "babel-loader": "^8.0.6",
    "bootstrap": "^4.3.1",
    "clean-webpack-plugin": "^1.0.1",
    "copy-webpack-plugin": "^5.0.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "js-offcanvas": "^1.2.9",
    "node-sass": "^4.11.0",
    "popper.js": "^1.14.7",
    "postcss-loader": "^3.0.0",
    "precss": "^4.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "sass-loader": "^7.1.0",
    "script-loader": "^0.7.2",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  }
....

我也把我的 babel 预设放在这里（以及 .babelrc）文件

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

我知道我会遗漏一些非常基本的东西，但就是看不到它。提前致谢！

Answer 1

这是因为你的 JSX 规则实际上并不是在寻找 .jsx 个文件，而是 .js 个文件。你的 'test' 正则表达式是错误的。

以下是使用 babel 加载 JSX 文件的 webpack 配置的摘录：

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

Google 了解基本的 React+Webpack 设置 articles/posts 查看 webpack.config.js 文件的完整示例

JSX：你可能需要一个合适的加载器来处理这种文件类型

JSX: You may need an appropriate loader to handle this file type

reactjs

webpack

babeljs

babel-loader