下面我将详细讲解“从零搭建Webpack5-react脚手架的实现步骤(附源码)”的完整攻略。

实现步骤

1. 初始化项目

首先，我们需要创建一个空的 Node.js 项目。我们可以使用 npm 或者 yarn 来初始化项目，这里以使用 npm 为例：

npm init -y

这会自动生成一个 package.json 文件，其中 -y 参数表示开启了自动配置的选项，统一接受所有默认值。

2. 安装 webpack

接下来，我们需要安装 webpack，它是一个用于打包 JavaScript 模块的工具。我们可以使用以下命令安装：

npm install webpack webpack-cli --save-dev

其中，webpack-cli 是 webpack 命令行工具，用于在终端中使用 webpack。

3. 安装 babel

由于我们准备使用 React 编写页面，因此我们需要使用 babel 来将 JSX 语法转换为 JavaScript。我们可以使用以下命令安装：

npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

@babel/core 是 babel 的核心模块；
babel-loader 是 webpack 使用 babel 的加载器；
@babel/preset-env 是 babel 可以使用的预设之一，它可以将 ES6 代码（包括 ES6 的语法、API、变量声明等）转换成浏览器可以支持的 ES5 代码；
@babel/preset-react 是 babel 可以使用的另一个预设，它可以将 React 的 JSX 语法转换成 JavaScript。

4. 安装 React 和 ReactDOM

接下来，我们需要安装 React 和 ReactDOM，这两个库是用于实现 React 的核心模块。我们可以使用以下命令安装：

npm install react react-dom --save

5. 配置 webpack

我们需要在项目根目录下创建一个 webpack.config.js 文件，我们将在其中进行 webpack 配置。以下是一个最简单的 webpack 配置文件：

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: { // 输出到 dist/bundle.js
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: { // 配置加载器
    rules: [
      {
        test: /\.js$/, // 匹配 JS 文件
        exclude: /node_modules/, // 排除掉 node_modules 目录
        use: {
          loader: 'babel-loader', // 使用 babel-loader
        },
      },
    ],
  },
};

其中，entry 表示入口文件（相对路径），output 表示输出文件（输出到 dist 目录下的 bundle.js 文件），module 表示模块加载配置。我们的规则是，匹配所有 .js 文件，但是排除掉 node_modules 目录，最后使用 babel-loader 进行加载。

6. 添加页面和组件

接下来，我们需要在 src 目录下添加一个 index.js 文件，这将是我们 React 项目的入口文件。并且，我们还需要添加一个 App.js 组件，在其中编写 React 代码。别忘了在 index.js 中使用 ReactDOM 渲染 App 组件。

以下是简单的示例代码：

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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


// src/App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello, React!</h1>
      </div>
    );
  }
}

export default App;

7. 添加 html 模板文件

我们需要在根目录下添加一个 index.html 文件，并且在其中引入打包后的脚本文件（即上一步中的 dist/bundle.js 文件）。以下是一个最简单的 index.html 文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Webpack 5 React Starter</title>
</head>
<body>
  <div id="root"></div>
  <script src="./dist/bundle.js"></script>
</body>
</html>

8. 添加 npm script

我们可以在 package.json 文件中添加一个 npm script，用于编译打包我们的代码，以及开启一个本地服务器来预览。以下是一个最简单的 package.json 文件：

{
  "name": "webpack5-react-starter",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "webpack serve --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.3",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

其中 dev 是用于开发环境的命令，build 是用于生产环境的命令。我们可以使用以下命令来启动开发服务器：

npm run dev

9. 编译打包

最后，我们可以使用以下命令来编译打包我们的代码：

npm run build

这会生成一个 dist 目录，并且在其中包含一个 bundle.js 文件，这就是我们打包后的代码。

示例

以下是两个 webpack5-react 脚手架示例：

示例一：webpack5-react 脚手架

这个示例是一个最简单的 webpack5-react 脚手架，你可以直接 clone 代码，然后开始编写自己的 React 项目。

https://github.com/huakang123/webpack5-react-starter

示例二：webpack5-react-router 脚手架

这个示例是一个使用了 React Router 的 webpack5-react 脚手架，它可以让你快速开始开发使用了路由的 React 项目。

https://github.com/huakang123/webpack5-react-router-starter

以上就是“从零搭建Webpack5-react脚手架的实现步骤(附源码)”的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：从零搭建Webpack5-react脚手架的实现步骤(附源码) - Python技术站

从零搭建Webpack5-react脚手架的实现步骤(附源码)