建站
咨詢
售后
建站咨詢
新聞中心
Webpack 是一個(gè)模塊化打包工具，它被廣泛地應(yīng)用在前端領(lǐng)域的大多數(shù)項(xiàng)目中。利用 Webpack 我們不僅可以打包 JS 文件，還可以打包圖片、CSS、字體等其他類型的資源文件。而支持打包非 JS 文件的特性是基于 Loader 機(jī)制來實(shí)現(xiàn)的。因此要學(xué)好 Webpack，我們就需要掌握 Loader 機(jī)制。本文阿寶哥將帶大家一起深入學(xué)習(xí) Webpack 的 Loader 機(jī)制，閱讀完本文你將了解以下內(nèi)容：
公司專注于為企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、商城網(wǎng)站定制開發(fā)，微信小程序，軟件定制設(shè)計(jì)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗(yàn)，我們會(huì)仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計(jì)、整合，為客戶設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，創(chuàng)新互聯(lián)更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。
- Loader 的本質(zhì)是什么?
- Normal Loader 和 Pitching Loader 是什么?
- Pitching Loader 的作用是什么?
- Loader 是如何被加載的?
- Loader 是如何被運(yùn)行的?
- 多個(gè) Loader 的執(zhí)行順序是什么?
- Pitching Loader 的熔斷機(jī)制是如何實(shí)現(xiàn)的?
- Normal Loader 函數(shù)是如何被運(yùn)行的?
- Loader 對(duì)象上 raw 屬性有什么作用?
- Loader 函數(shù)體中的 this.callback 和 this.async 方法是哪里來的?
- Loader 最終的返回結(jié)果是如何被處理的?
一、Loader 的本質(zhì)是什么?
由上圖可知，Loader 本質(zhì)上是導(dǎo)出函數(shù)的 JavaScript 模塊。所導(dǎo)出的函數(shù)，可用于實(shí)現(xiàn)內(nèi)容轉(zhuǎn)換，該函數(shù)支持以下 3 個(gè)參數(shù)：
- /**
- * @param {string|Buffer} content 源文件的內(nèi)容
- * @param {object} [map] 可以被 https://github.com/mozilla/source-map 使用的 SourceMap 數(shù)據(jù)
- * @param {any} [meta] meta 數(shù)據(jù)，可以是任何內(nèi)容
- */
- function webpackLoader(content, map, meta) {
- // 你的webpack loader代碼
- }
- module.exports = webpackLoader;
了解完導(dǎo)出函數(shù)的簽名之后，我們就可以定義一個(gè)簡(jiǎn)單的 simpleLoader：
- function simpleLoader(content, map, meta) {
- console.log("我是 SimpleLoader");
- return content;
- }
- module.exports = simpleLoader;
以上的 simpleLoader 并不會(huì)對(duì)輸入的內(nèi)容進(jìn)行任何處理，只是在該 Loader 執(zhí)行時(shí)輸出相應(yīng)的信息。Webpack 允許用戶為某些資源文件配置多個(gè)不同的 Loader，比如在處理 .css 文件的時(shí)候，我們用到了 style-loader 和 css-loader，具體配置方式如下所示：
webpack.config.js
- const path = require('path');
- module.exports = {
- entry: './src/index.js',
- output: {
- filename: 'bundle.js',
- path: path.resolve(__dirname, 'dist'),
- },
- module: {
- rules: [
- {
- test: /\.css$/i,
- use: ['style-loader', 'css-loader'],
- },
- ],
- },
- };
Webpack 這樣設(shè)計(jì)的好處，是可以保證每個(gè) Loader 的職責(zé)單一。同時(shí)，也方便后期 Loader 的組合和擴(kuò)展。比如，你想讓 Webpack 能夠處理 Scss 文件，你只需先安裝 sass-loader，然后在配置 Scss 文件的處理規(guī)則時(shí)，設(shè)置 rule 對(duì)象的 use 屬性為 ['style-loader', 'css-loader', 'sass-loader'] 即可。
二、Normal Loader 和 Pitching Loader 是什么?
2.1 Normal Loader
Loader 本質(zhì)上是導(dǎo)出函數(shù)的 JavaScript 模塊，而該模塊導(dǎo)出的函數(shù)(若是 ES6 模塊，則是默認(rèn)導(dǎo)出的函數(shù))就被稱為 Normal Loader。需要注意的是，這里我們介紹的 Normal Loader 與 Webpack Loader 分類中定義的 Loader 是不一樣的。在 Webpack 中，loader 可以被分為 4 類：pre 前置、post 后置、normal 普通和 inline 行內(nèi)。其中 pre 和 post loader，可以通過 rule 對(duì)象的 enforce 屬性來指定：
- // webpack.config.js
- const path = require("path");
- module.exports = {
- module: {
- rules: [
- {
- test: /\.txt$/i,
- use: ["a-loader"],
- enforce: "post", // post loader
- },
- {
- test: /\.txt$/i,
- use: ["b-loader"], // normal loader
- },
- {
- test: /\.txt$/i,
- use: ["c-loader"],
- enforce: "pre", // pre loader
- },
- ],
- },
- };
了解完 Normal Loader 的概念之后，我們來動(dòng)手寫一下 Normal Loader。首先我們先來創(chuàng)建一個(gè)新的目錄：
- $ mkdir webpack-loader-demo
然后進(jìn)入該目錄，使用 npm init -y 命令執(zhí)行初始化操作。該命令成功執(zhí)行后，會(huì)在當(dāng)前目錄生成一個(gè) package.json 文件：
- {
- "name": "webpack-loader-demo",
- "version": "1.0.0",
- "description": "",
- "main": "index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "keywords": [],
- "author": "",
- "license": "ISC"
- }
提示：本地所使用的開發(fā)環(huán)境：Node v12.16.2;Npm 6.14.4;
接著我們使用以下命令，安裝一下 webpack 和 webpack-cli 依賴包：
- $ npm i webpack webpack-cli -D
安裝完項(xiàng)目依賴后，我們根據(jù)以下目錄結(jié)構(gòu)來添加對(duì)應(yīng)的目錄和文件：
- ├── dist # 打包輸出目錄
- │ └── index.html
- ├── loaders # loaders文件夾
- │ ├── a-loader.js
- │ ├── b-loader.js
- │ └── c-loader.js
- ├── node_modules
- ├── package-lock.json
- ├── package.json
- ├── src # 源碼目錄
- │ ├── data.txt # 數(shù)據(jù)文件
- │ └── index.js # 入口文件
- └── webpack.config.js # webpack配置文件
dist/index.html
Webpack Loader 示例 Webpack Loader 示例