Web 开发之路：React 学习指南 12-2——Webpack 入门（一）

前言

在前面的学习中，我们已经接触了一些 Web 开发的基础知识，包括 HTML、CSS 和 JavaScript。现在，我们将把重点放在前端开发工具上，第一个要学习的就是 Webpack。Webpack 是一个非常流行的 JavaScript 模块打包工具，它可以帮助我们管理和打包 JavaScript 模块，让我们能够更轻松地构建复杂的 Web 应用程序。

一、介绍

Webpack 是一个模块打包器，它可以将多个 JavaScript 模块打包成一个或多个文件，以便在浏览器中运行。Webpack 的主要功能包括：

• 模块加载：Webpack 可以加载并解析 JavaScript 模块，并根据它们的依赖关系自动生成依赖图。
• 模块打包：Webpack 可以将多个 JavaScript 模块打包成一个或多个文件，以便在浏览器中运行。
• 代码分割：Webpack 可以将代码分割成多个模块，以便在需要时动态加载，从而提高应用程序的性能。
• 热更新：Webpack 可以提供热更新功能，在代码发生变化时自动更新浏览器中的代码，而无需重新加载整个页面。

二、安装脚手架

首先，我们需要安装脚手架。脚手架是一个工具，可以帮助我们快速创建新的 React 项目。这里我们使用 create-react-app 脚手架。

npm install -g create-react-app

安装完成后，我们可以创建一个新的 React 项目：

create-react-app my-app

三、这个去掉重新安装会保留版本

如果我们想保留当前版本的脚手架，可以先将脚手架卸载，然后再重新安装：

npm uninstall -g create-react-app
npm install -g create-react-app@<version>

其中，<version>是想要安装的脚手架版本。

四、全局的server安装

我们可以使用 npm 安装一个全局的 server：

npm install -g serve

安装完成后，就可以使用 serve 命令来启动一个本地服务器：

serve -s build

五、build npm run build 打包 serve-sbuild 这

如果我们想要打包项目，可以使用以下命令：

npm run build

打包完成后，可以在 build 文件夹中找到打包后的文件。

serve -s build

这条命令可以启动一个本地服务器，并把 build 文件夹作为根目录。

通过以上步骤，我们已经完成了 Webpack 的基本安装和配置。在接下来的章节中，我们将继续学习如何使用 Webpack 来构建更复杂的 Web 应用程序。