webpack5 也已经发布一段时间了，其模块联邦、bundle 缓存等新特性值得在项目中进行使用。经过笔者在公司实际项目中的升级结果来看，其提升效果显著，热更新时间由原来的 8s 减少到了 2s，会极大的提升开发幸福感。除此之外，webpack5 也带来了更好的 tree shaking 算法，项目的打包体积也会进一步减少，提升用户体验。
目前来看，create-react-app 脚手架还没有适配 webpack5，如果你想熟悉下如何从零开始配置 webpack5 项目的话，不妨跟着文档操作一下。
二、项目初始化 2.1 初始化文件结构首先创建一个文件夹，进行 npm 初始化
mkdir react-webpack5-template cd react-webpack5-template # npm 初始化配置 npm init -y # 创建 webpack 配置文件 touch webpack.common.js # 创建 babel 配置文件 mkdir src && cd src # 创建入口文件 touch index.js cd .. && mkdir build touch index.html在上述步骤执行完毕之后，你的目录结构应该如下所示：
├── src │ └── index.js ├── build │ └── index.html ├── webpack.common.js ├── .babelrc ├── package.json随后安装必要的依赖
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader path -D npm i react react-dom 2.2 完善配置文件文件结构生成完毕后，我们开始编写代码。首先，在index.js 中写入以下代码：
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <React.StrictMode> <div>你好，React-webpack5-template</div> </React.StrictMode>, document.getElementById('root') );在 webpack.common.js 中写入以下内容：
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = (env) => { return { mode: "development", entry: { index: './src/index.js' }, output: { // 打包文件根目录 path: path.resolve(__dirname, "dist/"), }, plugins: [ // 生成 index.html new HtmlWebpackPlugin({ filename: "index.html", template: "./build/index.html", }), ], module: { rules: [ { test: /\.(jsx|js)?$/, use: ["babel-loader"], include: path.resolve(__dirname, 'src'), }, ] }, devServer: { port: 8080, host: '0.0.0.0', }, } }在 index.html 中写入以下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div></div> </body> </html>在 .babalrc 中写入以下代码：
{ "presets": ["@babel/preset-react"] }然后在 package.json 中添加如下 script：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", + "dev": "webpack serve --config webpack.common.js" },随后我们运行 npm run dev 就可以直接运行了，由于我们上面设置的 devServer 端口号为 8080，所以在浏览器中打开 localhost:8080 即可看到如下效果：
到这里位置，我们的初步搭建已经完成了，但是我们在现有的项目中看到的 webpack 配置文件不止这些，有 less、css 文件的解析，image 等资源文件的处理，还有一些优化项的配置等，接下来会一一介绍。
三、功能性配置上面我们已经做到可以将一个简单的 React 项目运行起来了，接下来我们要做的是加一些功能。
3.1 样式文件解析在前端项目开发过程中，比较经常使用的是 css、less、scss、sass、stylus，下面我们就先仅对 less 进行配置，其余的样式文件可参考 GitHub 源码。首先安装 loader：
npm i style-loader less-loader less css-loader postcss-loader postcss-normalize autoprefixer postcss-preset-env -D首先，在 webpack.common.js 顶部加入以下正则表达式，用来判断样式文件：
// less/less module 正则表达式 const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/;然后在 webpack.common.js 中加入以下配置：
module: { rules: [ { test: lessRegex, use: ["style-loader", "css-loader", "postcss-loader", "less-loader"], sideEffects: true, }, ] }新增 postcss.config.js 文件并配置：
const postcssNormalize = require('postcss-normalize'); module.exports = { plugins: [ [ "postcss-preset-env", { autoprefixer: { flexbox: "no-2009", }, stage: 3, } ], postcssNormalize(), require('autoprefixer') ({ overrideBrowserslist: ['last 2 version', '>1%', 'ios 7'] }) ], };然后我们在 src 目录下新建 index.less 文件，测试配置是否成功：
// index.less .title { text-align: center; color: coral; }重新运行项目后发现样式生效，配置成功。
但是仅配置 less 是不够的，我们日常在开发过程中经常用到 less module，在这里我们进行如下配置，首先安装 react-dev-utils：
npm i react-dev-utils resolve-url-loader -D