本文的示例專案原始碼可以點選 這裡 獲取
一、前言
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 id="root"></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
在 webpack.common.js 中進行如下配置：
const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");
module: {
rules: [
{
test: lessRegex,
+ exclude: lessModuleRegex,
use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
sideEffects: true,
},
+ {
+ test: lessModuleRegex,
+ use: [
+ "style-loader",
+ {
+ loader: "css-loader",
+ options: {
+ modules: {
+ getLocalIdent: getCSSModuleLocalIdent,
+ }
+ }
+ },
+ "postcss-loader",
+ "less-loader"
+ ],
+ }
]
}
接下來我們新建 index.module.less 來進行測試：
.font {
color: red;
}
重新執行專案後樣式生效，並且 className 也發生了相應變化：
CSS、SCSS 與 SASS 的配置都大同小異，大家可以移步到我的 GitHub。
3.2 圖片地址解析
資源模組(asset module)是一種模組型別，它允許使用資原始檔（字型，圖示等）而無需配置額外 loader。
在 webpack 5 之前，通常使用：
raw-loader將檔案匯入為字串url-loader將檔案作為 data URI 內聯到 bundle 中file-loader將檔案傳送到輸出目錄資源模組型別(asset module type)，通過新增 4 種新的模組型別，來替換所有這些 loader：
asset/resource傳送一個單獨的檔案並匯出 URL。之前通過使用file-loader實現。asset/inline匯出一個資源的 data URI。之前通過使用url-loader實現。asset/source匯出資源的原始碼。之前通過使用raw-loader實現。asset在匯出一個 data URI 和傳送一個單獨的檔案之間自動選擇。之前通過使用url-loader，並且配置資源體積限制實現。—— 引自 webpack5 中文文件
webpack5 內建 assets 型別，我們不需要額外安裝外掛就可以進行圖片等資原始檔的解析，配置如下：
{
test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
如此我們便可以處理引入的圖片資原始檔，可以根據自身需要進行擴充。
四、效能優化
4. 1 引入快取
前面提到，webpack5 引入了快取來提高二次構建速度，我們只需要在 webpack 配置檔案中加入如下程式碼即可開心快取
cache: {
type: 'filesystem',
// 可選配置
buildDependencies: {
config: [__filename], // 當構建依賴的config檔案（通過 require 依賴）內容發生變化時，快取失效
},
name: 'development-cache',
},
重新執行專案後會發現 node_modules 目錄下會新增一個 .cache 資料夾：
筆者在實際專案中測試，熱更新時間由原來的 8s 縮短到 2s 可以說是提升巨大。
五、總結
到目前為止，配置工作算是已經完成了，本篇文章只是指導大家進行一些初始化配置，專案中肯定還有很多可以優化的地方，比如說分別配置 webpack.dev.js 以及 webpack.prod.js 以通過測試環境與正式環境的不同需求，在這裡就不細說，環境區分的相關配置我會上傳到 GitHub 中，如果你覺得專案對你有點用處的話，還請點個 star。