在前端开发中，使用 webpack 搭建项目已经成为了标配。而在使用 React 进行开发时，webpack 的使用也变得尤为重要。本文将详细介绍如何基于 webpack 搭建 React 项目，包括配置 webpack、使用 webpack 处理 React 组件、优化 webpack 构建等内容。
配置 webpack
首先，我们需要安装 webpack 及其相关插件，可以使用 npm 进行安装：
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react -D
其中，webpack 和 webpack-cli 是 webpack 的核心模块，webpack-dev-server 是用于开发环境的服务器，html-webpack-plugin 可以将生成的 js 文件自动添加到 html 文件中，babel-loader 和 @babel/core 是用于处理 ES6+ 语法的模块，@babel/preset-env 和 @babel/preset-react 则是用于处理 jsx 语法的模块。
接下来，我们需要创建 webpack 的配置文件 webpack.config.js，其中需要配置入口文件、输出文件、模块解析、插件等信息。一个基本的配置文件如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
----- -----------------
--
------- -
--------- -------------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- ---------------
--
--
--
--
-------- -
--- -------------------
--------- ----------------------
---
--
-------- -
----------- ------- --------
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
--
--其中，entry 表示入口文件，可以配置多个入口文件，output 表示输出文件的路径和文件名，module 中的 rules 表示使用 babel-loader 处理 js 和 jsx 文件，plugins 表示使用 html-webpack-plugin 插件自动生成 html 文件，并将生成的 js 文件自动添加到 html 文件中。resolve 表示自动解析文件扩展名，devServer 表示开发环境的服务器配置。
处理 React 组件
在使用 React 进行开发时，我们需要将 jsx 文件转换为 js 文件，以便浏览器能够正确解析。这里我们使用 Babel 来处理 jsx 文件。需要注意的是，Babel 只是一个工具，我们还需要配置 Babel 来使其能够正确地转换 jsx 文件。
在 webpack 配置文件中，我们已经使用了 babel-loader 来处理 js 和 jsx 文件，但是 babel-loader 只是一个中间件，我们还需要配置 Babel。我们可以在项目根目录下创建一个 .babelrc 文件，来配置 Babel。一个基本的配置文件如下：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}其中，@babel/preset-env 用于处理 ES6+ 语法，@babel/preset-react 用于处理 jsx 语法。
优化 webpack 构建
在使用 webpack 进行开发时，我们需要考虑如何优化 webpack 构建，以提高开发效率。下面我们介绍几种优化方式。
开启缓存
在开发过程中，每次修改代码都需要重新构建项目，这会浪费很多时间。我们可以开启缓存来提高构建速度。在 webpack 配置文件中，我们可以使用 cache 和 cache-loader 这两个选项来开启缓存。一个基本的配置文件如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
----- -----------------
--
------- -
--------- -------------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------------
-------- ---------------
---- -
-
------- ---------------
--
-
------- ---------------
--
--
--
--
--
-------- -
--- -------------------
--------- ----------------------
---
--
-------- -
----------- ------- --------
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
--
------ -
----- -------------
--------------- ----------------------- ----------
--
--其中，cache-loader 用于开启缓存，cache 用于配置缓存库的类型和路径。
使用 DllPlugin 和 DllReferencePlugin
在使用 webpack 进行开发时，每次构建项目都需要重新打包所有的依赖库，这会浪费很多时间。我们可以使用 DllPlugin 和 DllReferencePlugin 来将依赖库打包成一个单独的文件，以提高构建速度。
首先，我们需要创建一个 webpack.dll.config.js 文件，用于打包依赖库。一个基本的配置文件如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- --------------
------ -
-------- --------- -------------
--
------- -
--------- ----------------
----- ----------------------- -------
-------- ---------
--
-------- -
--- -------------------
----- ---------
----- ----------------------- ----------------------------
---
--
--其中，entry 表示需要打包的依赖库，output 表示打包后的文件名和路径，library 表示打包后的代码库的名称，DllPlugin 用于打包依赖库。
接下来，我们需要在 webpack 配置文件中使用 DllReferencePlugin 引用依赖库。一个基本的配置文件如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ------- - -------------------
-------------- - -
------ -
----- -----------------
--
------- -
--------- -------------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- ---------------
--
--
--
--
-------- -
--- ----------------------------
--------- ----------------------- -----------------------------
---
--- -------------------
--------- ----------------------
---
--
-------- -
----------- ------- --------
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
--
--其中，DllReferencePlugin 用于引用依赖库。
示例代码
完整的示例代码可以在我的 GitHub 仓库 中查看。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da2c75a941bf71341e987e