从零搭建React + Webpack项目：初步设置

在现代前端开发中，搭建一个可靠且灵活的开发环境是成功的关键。虽然有很多脚手架工具如 create-react-app 可以帮助我们快速开始一个项目，但是了解并掌握如何从零开始搭建一个项目，无疑会让我们对前端工程有更深的理解。

本系列博客将手把手带你从零开始搭建一个使用 React 和 Webpack 的项目。本文是系列的第一部分，将涵盖项目的初始化、依赖安装、以及基本的 Webpack 和 Babel 配置。

开始之前

确保你的开发环境中已经安装了 Node.js。我们将使用 npm（Node.js 的包管理器）来管理项目的依赖。

第一步：初始化项目

首先，创建一个新的目录来容纳你的项目，然后在该目录中打开终端或命令行界面，执行以下命令初始化一个新的 npm 项目：

npm init -y

这个命令将创建一个 package.json 文件，这是我们项目的配置中心。

第二步：安装核心依赖

接下来，我们需要安装一些必要的依赖：

• React：我们的项目核心库。

npm install react react-dom

• Webpack：用于打包我们的源代码。

npm install --save-dev webpack webpack-cli webpack-dev-server

• Babel：用于将 JSX 和 ES6 代码转换成兼容浏览器的 JavaScript 代码。

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

• HTML 插件：自动生成 HTML 文件并自动引入打包后的 JavaScript 文件。

npm install --save-dev html-webpack-plugin

第三步：配置Babel

Babel 是一个 JavaScript 编译器，非常有用，它可以帮助我们将 ES6 及以上版本的代码转换为向后兼容的 JavaScript 代码。为了配置 Babel，我们需要在项目根目录下创建一个 .babelrc 文件，并添加以下内容：

{
   
   
  "presets": [
    "@babel/preset-env", // 转换 ES6+
    [
      // 转换 JSX
      "@babel/preset-react",
      {
   
   
        "runtime": "automatic" // 使用 React 17+ 的 JSX 转换方式
      }
    ]
  ]
}

这样配置后，Babel 就会自动转换我们的 JSX 和 ES6+ 代码。

第四步：配置Webpack

Webpack 是一个模块打包器，可以帮助我们打包和优化前端资源。在项目根目录下创建一个 webpack.config.js 文件，并添