听说，你还没有从0-1自己搭建过一个react项目文章属于属于学习材料。内容是使用webpack5从0-1自己搭建一个r

站长

2024年08月30日 16:49 · 阅读数 35

文章适用于有点点webpack基础（不用太多，至少知道webpack是个啥玩意），但不太会手动搭建react，或者是在过去搭建学习的过程中报错的同学。

保姆式教程，每一步都有截图。

虽然webpack官网很详细的写了怎么配置plugin，哪个是入口文件，那个是出口文件。

但对于刚接触前端的同学来说要依靠文档阅读来搭建一个React的项目显然还是太困难了。

这其中最大的问题是，他们并没有告诉我们安装哪个依赖，需要用哪个版本，node的，plugin的。node版本不对会报错，plugin其中某两个版本相差太多会报错。总之，一切按照网上的视频教程去做或者完全按照官网的要求去配置。尝试过的同学们应该都经历过框框报错。

所以，以下内容是保姆式教程，请大家把脑子放到屁股上，然后一步一步跟着做。过程中会解释每一步的作用。

搭建准备

确认node版本为18+,最好为18.19.0 （node -v 查看版本）
确认npm版本为10+，最好为10.6.0 （npm -v 查看版本）
设置npm镜像源为淘宝镜像源（执行：npm config set registry https://registry.npm.taobao.org

第一步：创建文件夹并初始化package.json

按顺序执行以下命令

1.  mkdir my-react   解释：创建文件夹

2.  cd my-react   解释：进入刚创建的文件夹

3.  npm init (在my-react文件夹下执行，然后输入项目名称后一路回车)

然后，你应该会得到这么个玩意。听说，你还没有从0-1自己搭建过一个react项目文章属于属于学习材料。内容是使用webpack5从0-1自己搭建一个r

第二步，添加启动命令

往package.json文件的script这个key添加以下两行代码。

 "dev": "webpack-dev-server --open --mode development",
 "build": "webpack --mode production"

然后，你会得到如下文件

听说，你还没有从0-1自己搭建过一个react项目文章属于属于学习材料。内容是使用webpack5从0-1自己搭建一个r

script字段介绍

任何在当前目录下执行npm run命令时，都会调用这个脚本。比如npm run dev，就会去package.json文件中寻找script字段，然后找到dev对应的脚本，在本案例中，dev对应的脚本就是 webpack-dev-server --open --mode development（这个脚本用于启动webpack服务）。

第三步：安装编译react和webpack的相关依赖

在当前目录下执行一下代码。

为了防止因为版本出现的稀奇古怪的问题。这里的命令加了版本号。

 npm i webpack@5.94.0 webpack-cli@5.1.4 webpack-dev-server@5.0.4 react@18.3.1 react-dom@18.3.1 esbuild-loader@4.2.2 html-loader@5.1.0 html-webpack-plugin@5.6.0

关于这几个依赖包的作用

webpack、webpack-cli: 提供webpack打包功能，负责驱动webpack进行基础工作
webpack-dev-server: 提供一个本地服务，这就是为啥咱们能在浏览器用本地地址访问的原因，靠他。
react、react-dom: react相关依赖包。构建react项目必须使用的包。
esbuild-loader: 打包时将jsx等文件编译成目标版本语言，比如es5，比如把jsx文件的代码转换为es5浏览器可以看懂的代码。
html-loader、html-webpack-plugin: 用以根据指定html模板文件生成最后打包的html文件

下载完毕后，当前目录下会多一个node_modules文件夹和package-lock.json文件。package.json文件的样子应该也如下听说，你还没有从0-1自己搭建过一个react项目文章属于属于学习材料。内容是使用webpack5从0-1自己搭建一个r

到这里，package.json文件就算完成了。后面我们来配置webpack.config.js文件

创建 webpack.config.js文件并编写其编译内容

在根目录（my-react目录）下新建一个 webpack.config.js文件，然后把以下内容复制进去

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");


module.exports = {
    entry: "./src/main.jsx", //入口文件
    output: {  //输出路径和文件名
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /\.html$/, //正则匹配.html结尾的文件
                use: [
                    {
                        loader: "html-loader" //使用html-loader
                    }
                ]
            },
            {
                test: /\.(js|ts|jsx|tsx)$/, //正则匹配js.ts.jsx.tsx结尾的文件
                include: path.appSrc,
                use: [
                    {
                        loader: "esbuild-loader", //使用esbuild-loader将js、ts、jsx、tsx文件内容转换为es2015
                        options: {
                            loader: "jsx", //把jsx文件
                            target: "es2015",  //编译成es2015
                        },
                    }
                ]
            }
        ]
    },
    plugins: [ //使用插件，这里使用了HtmlWebPackPlugin
        new HtmlWebPackPlugin({
            title: "react-ts-project",//react的一个转换插件
            filename: "./index.html",
            template: "./index.html"//当前模板地址
        })
    ]
};

第四步：创建相关文件

仔细看webpack.config.js，其中一共用到了index.html文件、src/main.jsx文件。所以，我们现在还没有，先创建一下这两个文件。

项目根目录创建index.html，该文件内容如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>自己手动搭建的react</title>
    </head>
    <body>
        <!-- //为什么id要叫app?因为一会，main那个入口文件一会要get这个id，然后把JSX相关内容编译为html以后插入到这个标签内。 -->
        <div id="app"></div>
    </body>
</html>

你会得到如下文件

听说，你还没有从0-1自己搭建过一个react项目文章属于属于学习材料。内容是使用webpack5从0-1自己搭建一个r

然后在src文件夹下创建main.js和一个app.jsx

mian.jsx内容如下

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.jsx";

/**
 * 入口文件
 */


//这里就是获取到APP组件，然后ReactDOM.render会把APP组件编译为html，最后插入到index.html文件里id为app的节点里面去
ReactDOM.render(
  <App />,
  document.getElementById("app")
);

app.js内容如下

    import React from "react";

    /**
     * React组件
     * @returns
     */
    function App() {

      return (
        <div>我是react的第一个组件，也是最外层的组件！！！</div>
      );
    }

    export default App;

到现在为止，整个项目的结构是这样的↓ 听说，你还没有从0-1自己搭建过一个react项目文章属于属于学习材料。内容是使用webpack5从0-1自己搭建一个r

这样一个react项目就创建好了！记得之前在package.json文件里写的dev命令吗，到项目跟目录下运行这个命令就好了！

npm run dev

听说，你还没有从0-1自己搭建过一个react项目文章属于属于学习材料。内容是使用webpack5从0-1自己搭建一个r

这样就可以成功的跑起来了。

过去对于新手来说，自己手动跟着教程搭建项目最大的问题就是报错。一报错就不知道该怎么办，但是在这个教程里，如果你是跟着步骤一步一步来的。版本都和教程一样，那么把项目跑起来应该完全没问题。实在跑不起来也没关系，结尾有demo，大家拉下来和自己的项目对比一下哪里不一样。一共就这几个文件。

如果需要手动给项目配置ts

创建 tsconfig.json文件

在根目录创建 tsconfig.json，文件内容如下

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    // "suppressImplicitAnyIndexErrors": true,
    "outDir": "./build",
    "sourceMap": false,
    "allowJs": true, // allowJs=true => tsc compile js as module, no type check
    "removeComments": true,
    "noImplicitReturns": true,
    "noEmit": true,
    "noImplicitAny": false,
    "noImplicitThis": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "declaration": true,
    "downlevelIteration": true,
    "allowImportingTsExtensions": true,
    "lib": [
      "dom",
      "esnext",
      "DOM.Iterable"
    ],
    "baseUrl": "./",
    "paths": {
      "@api/*": [
        "./src/api"
      ],
      "@src/*": [
        "./src/*"
      ],
      "@components/*": [
        "./src/components/*"
      ],
      "@utils/*": [
        "./src/utils/*"
      ],
      "@styles": [
        "./src/styles"
      ]
    }
  },
  "include": [
    "src",
  ],
  "exclude": [
    "node_modules",
    "webpack",
    "build",
  ]
}