使用 webpack 从零搭建 React 项目：新手指南

对那些渴望踏入现代 JavaScript 世界的开发人员来说，webpack 是一款必不可少的工具。它可以将你的代码块（例如 React 组件）打包成可部署的应用程序，并为你提供自定义打包过程的灵活性。本文将为你提供一份从零开始使用 webpack 构建 React 项目的分步指南。

前提条件

• 了解 JavaScript 和 React 基础知识
• Node.js（版本 12 或更高版本）
• npm 或 yarn

步骤 1：创建 React 项目

使用 create-react-app 脚手架创建一个新的 React 项目：

npx create-react-app my-app

这将创建一个带有基本文件和依赖项的新项目目录。

步骤 2：安装 webpack

转到你的项目目录并安装 webpack 和必要的插件：

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env

或者，你可以使用 yarn：

yarn add --dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env

步骤 3：创建 webpack 配置文件

在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下配置：

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new CleanWebpackPlugin()],
};

步骤 4：安装并配置 Babel

Babel 将 ES6+ 代码转换为较旧的 JavaScript，使其与所有浏览器兼容。

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

或：

yarn add --dev babel-loader @babel/core @babel/preset-react

在 package.json 中添加以下 "babel" 字段：

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

步骤 5：创建 React 组件

在 src 目录下创建 index.js 文件并添加以下组件：

import React from "react";

const App = () => {
  return <h1>Hello, webpack!</h1>;
};

export default App;

步骤 6：运行 webpack

现在你可以使用以下命令运行 webpack：

npx webpack

或：

yarn webpack

这将创建包含你的打包应用程序的 dist 目录。

步骤 7：使用 webpack-dev-server 进行热重载

为了方便开发，使用 webpack-dev-server 为你的应用程序提供热重载：

npx webpack serve

或：

yarn webpack serve

这将启动一个本地服务器，允许你在进行代码更改时自动更新应用程序。

结论

使用 webpack 构建 React 项目为开发人员提供了创建自定义打包流程和优化应用程序性能的灵活性。本指南提供了分步说明，指导初学者使用 webpack 从头开始构建 React 项目，并提供了对构建和自定义 React 应用程序的深入理解。