深入淺出 webpack 之基礎配置篇
阿新 • • 發佈：2020-11-14
## 前言
前端工程化經歷過很多優秀的工具，例如 `Grunt`、`Gulp`、`webpack`、`rollup` 等等，每種工具都有自己適用的場景，而現今應用最為廣泛的當屬 `webpack` 打包了，因此學習好 `webpack` 也成為一個優秀前端的必備技能。
由於 `webpack` 技術棧比較複雜，因此作者打算分兩篇文章進行講解：
1. 基礎應用篇：講解各種基礎配置；
1. 高階應用篇：講解 `webpack` 優化以及原理。
[注] 本文是基於 `webpack 4.x` 版本
## webpack 是什麼
> webpack 是模組打包工具。
`webpack` 可以在不進行任何配置的情況下打包如下程式碼：
**[注] 不進行任何配置時，webpack 會使用預設配置。**
```javascript
// moduleA.js
function ModuleA(){
this.a = "a";
this.b = "b";
}
export default ModuleA
// index.js
import ModuleA from "./moduleA.js";
const module = new ModuleA();
```
我們知道瀏覽器是不認識 `import` 語法的，直接在瀏覽器中執行這樣的程式碼會報錯。我們就可以藉助 `webpack` 來打包這樣的程式碼，賦予 `JavaScript` 模組化的能力。
最初版本的 `webpack` 只能打包 `JavaScript` 程式碼，隨著發展 `css` 檔案，圖片檔案，字型檔案都可以被 `webpack` 打包。
本文將主要講解 `webpack` 是如何打包這些資源的，屬於比較基礎的文章主要是為了後面講解效能優化和原理做鋪墊，如果已經對 `webpack` 比較熟悉的同學可以跳過本文。
## 初始化安裝 webpack
```javascript
mkdir webpackDemo // 建立資料夾
cd webpackDemo // 進入資料夾
npm init -y // 初始化package.json
npm install webpack webpack-cli -D // 開發環境安裝 webpack 以及 webpack-cli
```
通過這樣安裝之後，我們就可以在專案中使用 `webpack` 命令了。
## 打包第一個檔案
`webpack.config.js`
```javascript
const path = require('path');
module.exports = {
mode: 'development', // {1}
entry: { // {2}
main:'./src/index.js'
},
output: { // {3}
publicPath:"", // 所有dist檔案新增統一的字首地址，例如釋出到cdn的域名就在這裡統一新增
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
}
}
```
程式碼分析：
- {1} `mode` 打包模式是開發環境還是生成環境， `development | production`
- {2} `entry` 入口檔案為 `index.js`
- {3} `output` 輸出到 `path` 配置的 `dist` 資料夾下，輸出的檔名為 `filename` 配置的 `bundle.js`
建立檔案進行簡單打包：
```javascript
src/moduleA.js
const moduleA = function () {
return "moduleA"
}
export default moduleA;
--------------------------------
src/index.js
import moduleA from "./moduleA";
console.log(moduleA());
```
修改 `package.json` 的 `scripts`，增加一條命令：
```javascript
"scripts": {
"build": "webpack --config webpack.config.js"
}
```
執行 `npm run build` 命令
## 打包後的 bundle.js 原始碼分析
原始碼經過簡化，只把核心部分展示出來，方便理解：
```javascript
(function(modules) {
var installedModules = {};
function __webpack_require__(moduleId) {
// 快取檔案
if(installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// 初始化 moudle，並且也在快取中存入一份
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};
// 執行 "./src/index.js" 對應的函式體
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 標記"./src/index.js"該模組以及載入
module.l = true;
// 返回已經載入成功的模組
return module.exports;
}
// 匿名函式開始執行的位置，並且預設路徑就是入口檔案
return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
// 傳入匿名執行函式體的module物件，包含"./src/index.js"，"./src/moduleA.js"
// 以及它們對應要執行的函式體
({
"./src/index.js": (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _moduleA__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./moduleA */ \"./src/moduleA.js\");\n\n\nconsole.log(Object(_moduleA__WEBPACK_IMPORTED_MODULE_0__[\"default\"])());\n\n\n//# sourceURL=webpack:///./src/index.js?");
}),
"./src/moduleA.js": (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\nconst moduleA = function () {\n return \"moduleA\"\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (moduleA);\n\n\n//# sourceURL=webpack:///./src/moduleA.js?");
})
});
```
再來看看`"./src/index.js"` 對應的執行函式
```javascript
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _moduleA__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./moduleA */ \"./src/moduleA.js\");\n\n\nconsole.log(Object(_moduleA__WEBPACK_IMPORTED_MODULE_0__[\"default\"])());\n\n\n//# sourceURL=webpack:///./src/index.js?");
})
```
你會發現就是一個 `eval` 執行方法。
我們拆開 `eval` 來仔細看看裡面是什麼內容，簡化後代碼如下：
```javascript
var moduleA = __webpack_require__("./src/moduleA.js");
console.log(Object(moduleA["default"])());
```
上面原始碼中其實已經呼叫了 `__webpack_require__(__webpack_require__.s = "./src/index.js");` ，然後 `"./src/index.js"` 又遞迴呼叫了去獲取 `"./src/moduleA.js"` 的輸出物件。
我們看看 `"./src/moduleA.js"` 程式碼會輸出什麼：
```javascript
const moduleA = function () {
return "moduleA"
}
__webpack_exports__["default"] = (moduleA);
```
再回頭看看上面的程式碼就相當於：
```javascript
console.log(Object(function () {
return "moduleA"
})());
```
最後執行列印了 `"moduleA"`
通過這段原始碼的分析可以看出：
1. 打包之後的模組，都是通過 `eval` 函式進行執行的；
1. 通過呼叫入口函式 `./src/index.js` 然後遞迴的去把所有模組找到，由於遞迴會進行重複計算，因此 `__webpack_require__` 函式中有一個快取物件 `installedModules`。
## loader
我們知道 `webpack` 可以打包 `JavaScript` 模組，而且也早就聽說 `webpack` 還可以打包圖片、字型以及 `css`，這個時候就需要 `loader` 來幫助我們識別這些檔案了。
**[注意] 碰到檔案不能識別記得找 loader 。**
### 打包圖片檔案
修改配置檔案：`webpack.config.js`
```javascript
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main:'./src/index.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/\.(png|svg|jpg|gif)$/,
use:{
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath:"images", // 打包該資源到 images 資料夾下
limit: 2048 // 如果圖片的大小，小於2048KB則時輸出base64，否則輸出圖片
}
}
}
]
}
}
```
修改：`src/index.js`
```javascript
import moduleA from "./moduleA";
import header from "./header.jpg";
function insertImg(){
const imageElement = new Image();
imageElement.src = `dist/${header}`;
document.body.appendChild(imageElement);
}
insertImg();
```
執行打包後，發現可以正常打包，並且 `dist` 目錄下也多出了一個圖片檔案。
我們簡單分析：
`webpack` 本身其實只認識 `JavaScript` 模組的，當碰到圖片檔案時便會去 `module` 的配置 `rules` 中找，發現 `test:/\.(png|svg|jpg|gif)$/` ，正則匹配到圖片檔案字尾時就使用 `url-loader` 進行處理，如果圖片小於 `2048KB` （這個可以設定成任意值，主要看專案）就輸出 `base64` 。
### 打包樣式檔案
```javascript
{
test:/\.scss$/, // 正則匹配到.scss樣式檔案
use:[
'style-loader', // 把得到的CSS內容插入到HTML中
{
loader: 'css-loader',
options: {
importLoaders: 2, // scss中再次import scss檔案，也同樣執行 sass-loader 和 postcss-loader
modules: true // 啟用 css module
}
},
'sass-loader', // 解析 scss 檔案成 css 檔案
'postcss-loader'// 自動增加廠商字首 -webket -moz，使用它還需要建立postcss.config.js配置檔案
]
}
```
`postcss.config.js`
```javascript
module.exports = {
plugins: [
require('autoprefixer')
]
};
```
打包解析：
1. 當 `webpack` 遇到 `xx.scss` 樣式檔案是；
1. 依次呼叫 `postcss-loader` 自動增加廠商字首 `-webket -moz` ；
1. 呼叫 `sass-loader` 把 `scss` 檔案轉換成 `css` 檔案；
1. 呼叫 `css-loader` 處理 `css` 檔案，其中 `importLoaders:2` ，是 `scss` 檔案中引入了其它 `scss` 檔案，需要重複呼叫 `sass-loader` `postcss-loader` 的配置項；
1. 最後呼叫 `style-loader` 把前面編譯好的 `css` 檔案內容以 `` 形式插入到頁面中。
**[注意] loader的執行順序是陣列後到前的執行順序。**
### 打包字型檔案
```javascript
{
test: /\.(woff|woff2|eot|ttf|otf)$/, // 打包字型檔案
use: ['file-loader'] // 把字型檔案移動到dist目錄下
}
```
### plugins
`plugins` 可以在 `webpack` 執行到某個時刻幫你做一些事情，相當於 `webpack` 在某一個生命週期，呼叫外掛做一些輔助的事情。
#### html-webpack-plugin
作用：
會在打包結束後，自動生成一個 `HTML` 檔案（也可通過模板生成），並把打包生成的 `js` 檔案自動引入到 `HTML` 檔案中。
使用：
```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html' // 使用模板檔案
})
]
```
#### clean-webpack-plugin
作用：
每次輸出打包結果時，先自動刪除 `output` 配置的資料夾
使用：
```javascript
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
...
new CleanWebpackPlugin() // 使用這個外掛在每次生成dist目錄前，先刪除dist目錄
]
```
### source map
在開發過程中有一個功能是很重要的，那就是錯誤除錯，我們在編寫程式碼過程中出現了錯誤，編譯後的包如果提示不友好，將會嚴重影響我們的開發效率。而通過配置 `source map` 就可以幫助我們解決這個問題。
示例：
修改：`src/index.js`，增加一行錯誤的程式碼
```javascript
console.log(a);
```
由於`mode: 'development'` 開發模式是預設會開啟 `source map` 功能的，我們先關閉它。
```javascript
devtool: 'none' // 關閉 source map 配置
```
執行打包來看下控制檯的報錯資訊：
錯誤堆疊資訊，竟然給的是打包之後的 `bundle` 檔案中的資訊，但其實我們在開發過程中的檔案結構並不是這樣的，因此我們需要它能指明我們是在 `index.js` 中的多少行發生錯誤了，這樣我們就可以快速的定位到問題。
我們去掉 `devtool:'none'` 這行配置，再執行打包：
此時它就把我們在開發中的具體錯誤在堆疊中輸出了，這就是 `source map` 的功能。
總結下：`source map` 它是一個對映關係，它知道 `dist` 目錄下 `bundle.js` 檔案對應的實際開發檔案中的具體行列。
### webpackDevServer
每次修改完程式碼之後都要手動去執行編譯命令，這顯然是不科學的，我們希望是每次寫完程式碼，`webpack` 會進行自動編譯，`webpackDevServer` 就可以幫助我們。
增加配置：
```javascript
devServer: {
contentBase: './dist', // 伺服器啟動根目錄設定為dist
open: true, // 自動開啟瀏覽器
port: 8081, // 配置服務啟動埠，預設是8080
proxy:{
'/api': 'http://www.baidu.com' // 當開發環境時傳送/api請求時都會代理到http://www.baidu.com host下
}
},
```
它相當於幫助我們開啟了一個 `web` 服務，並監聽了 `src` 下檔案，當檔案有變動時，自動幫助我們進行重新執行 `webpack` 編譯。
我們在 `package.json` 中增加一條命令：
```javascript
"scripts": {
"start": "webpack-dev-server"
},
```
現在我們執行 `npm start` 命令後，可以看到控制檯開始實行監聽模式了，此時我們任意更改業務程式碼，都會觸發 `webpack` 重新編譯。
### webpack-dev-server 實現請求代理
在前後端分離的專案中進行前端開發時，想必每個同學都會碰到一個棘手的問題就是請求跨域。一般在生產環境下我們通過 `nginx` 進行代理，那麼開發環境下我們一般如何處理呢，答案非常簡單，配置`webpack-dev-server` 也可以輕易實現
```
devServer: {
...
proxy:{
'/api': 'http://www.baidu.com' // 當開發環境時傳送/api請求時都會代理到http://www.baidu.com host下
}
}
```
`proxy` 的配置項非常豐富具體可以參考文件，我們只需要記住，它可以提供代理伺服器的功能給我們。
### 手動實現簡單版 webpack-dev-server
專案根目錄下增加：`server.js`
載入包： `npm install express webpack-dev-middleware -D`
```javascript
const express = require('express');
const app = express();
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js'); // 引入webpack配置檔案
const compiler = webpack(config); // webpack 編譯執行時
// 告訴 express 使用 webpack-dev-middleware，
// 以及將 webpack.config.js 配置檔案作為基礎配置
app.use(webpackDevMiddleware(compiler, {}));
// 監聽埠
app.listen(3000,()=>{
console.log('程式已啟動在3000埠');
});
```
`webpack-dev-middleware` 作用：
1. 通過 `watch mode` 監聽資源的變更然後自動打包，本質上是呼叫 `compiler` 物件上的 `watch` 方法；
1. 使用記憶體檔案系統編譯速度快 `compiler.outputFileSystem = new MemoryFileSystem()` ;
`package.json` 增加一條命令：
```javascript
"scripts": {
"server": "node server.js"
},
```
執行命令 `npm run server` 啟動我們自定義的服務，瀏覽器中輸入 `http://localhost:3000/` 檢視效果。
### 熱更新 Hot Moudule Replacement（HMR）
模組熱更新功能會在應用程式執行過程中，替換、新增或刪除模組，而無需重新載入整個頁面。
#### HMR 配置
```javascript
const webpack = require('webpack');
module.exports = {
devServer: {
contentBase: './dist',
open: true,
port: 8081,
hot: true // 熱更新配置
},
plugins:[
new webpack.HotModuleReplacementPlugin() // 增加熱更新外掛
]
}
```
#### 手動編寫 HMR 程式碼
在編寫程式碼時經常會發現熱更新失效，那是因為相應的 `loader` 沒有去實現熱更新，我們看看如何簡單實現一個熱更新。
```javascript
import moduleA from "./moduleA";
if (module.hot) {
module.hot.accept('./moduleA.js', function() {
console.log("moduleA 支援熱更新拉");
console.log(moduleA());
})
}
```
程式碼解釋：
我們引人自己編寫的一個普通 `ES6` 語法模組，假如我們想要實現熱更新就必須手動監聽相關檔案，然後當接收到更新回撥時，主動呼叫。
還記得上面講 `webpack` 打包後的原始碼分析嗎，`webpack` 給模組都建立了一個 `module` 物件，當你開啟模組熱更新時，在初始化 `module` 物件時增加了(原始碼經過刪減)：
```javascript
function hotCreateModule(moduleId) {
var hot = {
active: true,
accept: function(dep, callback){
if (dep === undefined) hot._selfAccepted = true;
else if (typeof dep === "function") hot._selfAccepted = dep;
else if (typeof dep === "object")
for (var i = 0; i < dep.length; i++)
hot._acceptedDependencies[dep[i]] = callback || function() {};
else hot._acceptedDependencies[dep] = callback || function() {};
}
}
}
```
`module` 物件中儲存了監聽檔案路徑和回撥函式的依賴表，當監聽的模組發生變更後，會去主動呼叫相關的回撥函式，實現手動熱更新。
[注意] 所有編寫的業務模組，最終都會被 `webpack` 轉換成 `module` 物件進行管理，如果開啟熱更新，那麼 `module` 就會去增加 `hot` 相關屬性。這些屬性構成了 `webpack` 編譯執行時物件。
### 編譯 ES6
顯然大家都知道必須要使用 `babel` 來支援了，我們具體看看如何配置
#### 配置
1、安裝相關包
```javascript
npm install babel-loader @babel/core @babel/preset-env @babel/polyfill -D
```
2、修改配置 `webpack.config.json`
還記得文章上面說過，碰到不認識的檔案型別的編譯問題要求助 `loader`
```javascript
module:{
rules:[
{
test: /\.js$/, // 正則匹配js檔案
exclude: /node_modules/, // 排除 node_modules 資料夾
loader: "babel-loader", // 使用 babel-loader
options:{
presets:[
[
"@babel/preset-env", // {1}
{ useBuiltIns: "usage" } // {2}
]
]
}
}
]
}
```
`babel` 配置解析：
- {1} `babel presets` 是一組外掛的集合，它的作用是轉換 `ES6+` 的新語法，但是一些新 `API` 它不會處理的
- `Promise` `Generator` 是新語法
- `Array.prototype.map` 方法是新 `API` ，`babel` 是不會轉換這個語法的，因此需要藉助 `polyfill` 處理
- {2} `useBuiltIns` 的配置是處理 `@babel/polyfill` 如何載入的，它有3個值 `false` `entry` `usage`
- `false`: 不對 `polyfills`做任何操作；
- `entry`: 根據 `target`中瀏覽器版本的支援，將`polyfills`拆分引入，僅引入有瀏覽器不支援的 `polyfill`
- `usage`：檢測程式碼中`ES6/7/8`等的使用情況，僅僅載入程式碼中用到的`polyfills`
#### 演示
新建檔案 `src/moduleES6.js`
```javascript
const arr = [
new Promise(()=>
num: {item}
) ) } } ReactDom.render(, document.getElementById('root')); ``` 執行打包命令 `yarn build` 可以正確打包並且顯示正常介面。 隨著專案的複雜度增加，`babel` 的配置也隨之變的複雜，因此我們需要把 `babel` 相關的配置提取成一個單獨的檔案進行配置方便管理，也就是我們工程目錄下的 `.babelrc` 檔案。 #### .babelrc ```javascript { "presets":[ ["@babel/preset-env",{ "useBuiltIns": "usage" }], ["@babel/preset-react"] ] } ``` [注意] `babel-laoder` 執行 `presets` 配置順序是陣列的後到前，與同時使用多個 `loader` 的執行順序是一樣的。 也就是把 `webpack.config.js` 中的 `babel-loader` 中的 `options` 物件提取成一個單獨檔案。  通過編譯記錄，我們可以發現一個問題就是打包後的 `bundle.js` 檔案足足有 `1M` 大，那是因為 `react` 以及 `react-dom` 都被打包進來了。 ## Tree Shaking `Tree shaking` 的本質是消除無用的 `JavaScript` 程式碼。 ```javascript import { forEach } from "lodash" forEach([1,2,3],(item)=>