You may need an additional loader to handle the result of these loaders,React

最新推荐文章于 2024-02-02 16:33:30 发布

菜鸟小佳

最新推荐文章于 2024-02-02 16:33:30 发布

阅读量1.3k

点赞数

分类专栏： react 文章标签： react.js javascript 前端 webpack

本文链接：https://blog.csdn.net/weixin_42429288/article/details/129363011

版权

react 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

问题

如何复现

用create-react-app新建一个react项目

index.js如下

import React from 'react';
import ReactDOM from 'react-dom/client';
import TodoList from './TodoList.jsx';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <TodoList />
  </React.StrictMode>
);

todolist.jsx如下

然后引入webpack

npm install webpack webpack-cli --save-dev

配置webpack.config.js

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "[name].js",
    path: __dirname + "/dist",
  },

  // rules
  module: {
    rules: [
      {
        test: /\.m?jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env", { targets: "defaults" }]],
          },
        },
      },
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
    ],
  },
};

在package.json的script中加入webpack

打开命令行，运行

npm run bundle

就会出现最开头我们看到的问题

原因
babel有处理react的preset, 忘记引入了
解决办法
参考网址：@babel/preset-react · Babel
1. 下载
```
npm install --save-dev @babel/preset-react
```
2.引入，将这个preset加入到webpack.config.js中

3.再次运行
```
npm run bundle
```