預(yù)處理器 (loader) ，的主要功能是賦予了 Webpack 可處理不同資源類型的能力，極大豐富了其可擴(kuò)展性。

一個(gè)Web工程通常會包含HTML、JS、CSS、模板、圖片、字體等多種類型的靜態(tài)資源，并且這些資源之間都存在著某種聯(lián)系。對于 Webpack 來說，所有這些靜態(tài)資源都是模塊，可以像加載一個(gè)JS文件一樣去加載它們，如在index.js中加載style.css:

//index.js
import './style.css'

這個(gè)style.css雖然是被加載在js文件中，但其實(shí)是可以被打包并生成在輸出資源目錄下，對index.js 文件也不會產(chǎn)生質(zhì)性的影響。這句引用的實(shí)際意義是描述了JS 文件與 CSS 文件之間的依賴關(guān)系。

在實(shí)際開發(fā)中，有時(shí)某個(gè)頁面用到了組件，不光要加載JS文件，還要加載樣式，而通過Webpack我們可以采用一種更簡潔的方式來表達(dá)這種依賴關(guān)系

// 。/u1/calendar/index.js
1mport './style.scss'; //引用組件自身樣式

// ./page/home/index.js
import Calendar from './ui/calendar/index.js';
import './styles.css' ;// 引用頁面自身樣式

可以看到，在calendar的JS中加載了其組件自身的樣式，而對于頁面來說只要載calendar/index.js 即可(以及頁面自身的樣式)，不需要額引入組件的樣式。讓W(xué)ebpack維護(hù)模塊間的關(guān)系可以使工程結(jié)構(gòu)更加直觀，代碼的可維護(hù)性更強(qiáng)。

loader 概述

每個(gè)loader本質(zhì)上都是一個(gè)函數(shù)。在 Webpack 4之前，函數(shù)的輸人和輸出都必須為字符串; 在Webpack 4之后，loader也同時(shí)支持抽象語法樹 (AST)的傳遞，通過這種方法來減少重復(fù)的代碼解析。用公式表達(dá) loader的本質(zhì)則為以下形式:

output = loader(input)

舉一個(gè)例子，當(dāng)我們使用babel-loader將ES6+的代碼轉(zhuǎn)化為ES5時(shí)，上面的公式如下:

ES5 =babel-loader(ES6+)

loader 可以是鏈?zhǔn)降?/strong>。我們可以對一種資源設(shè)置多個(gè)loader，第一個(gè)loader 的輸入是文件源碼，之后所有 loader 的輸入都為上一個(gè)loader 的輸出。公式如下：

// app.js
import './style.css';

// style.css
body
	text-align; center;
	padding: 100px;
	color: #fff;
	background-color: #09c;
}

npm install css-loader

module.exports = {
	// ...
	module: {
		rules: {
			test: /\.csss/,
			use: {'css-loader'},
		}
	}
}

module.exports = {
	// ...
	module: {
		rules: {
			test: /\.csss/,
			use: ['style-loader'，'css-loader'],
		}
	}
}

我們把style-loader加到了css-loader前面，這是因?yàn)?strong>在Webpack打包時(shí)是按照數(shù)組從后往前的順序?qū)①Y源交給 loader 處理的，因此要把最后生效的放在前面。

loader options
loader作為預(yù)處理器通常會給開發(fā)者提供一些配置項(xiàng)，在引入loader 的時(shí)候可以通過options將它們傳人。
下面是一些場景下loader的相關(guān)配置

exclude與 include
exclude與 include是用來排除或包含指定目錄下的模塊，可接收正則表達(dá)式或者字符串(文件絕對路徑)，以及由它們組成的數(shù)組。如下例：

rules: {
	test: /\.csss/,
	use: ['style-loader'，'css-loader'],
	exclude: /node_modules/,
}

上面配置的含義是node_modules 中的模塊不會執(zhí)行這條規(guī)則。該配置項(xiàng)通常是必加的，否則可能拖慢體的打包速度。

include的例子如下：

rules: {
	test: /\.csss/,
	use: ['style-loader'，'css-loader'],
	include: /src/,
}

include代表該規(guī)則只對正則匹配到的模塊生效。
exclude和include 同時(shí)存在時(shí)，exclude的優(yōu)先級更高。
由于exclude優(yōu)先級更高，我們可以對include中的子目錄進(jìn)行排除。請看下面的例子：

rules: {
	test: /\.csss/,
	use: ['style-loader'，'css-loader'],
	exclude:/src\/lib/,
	include: /src/,
}

通過include，我們將該規(guī)則配置為僅對 src 目錄生效，但是仍然可以通過exclude排除其中的src/lib目錄。

resource與issuer
resource與issuer可用于更加精確地確定模塊規(guī)則的作用范圍。就比如下面的例子：

// index.js
import ./style.css';

在Webpack 中，一般認(rèn)為被加載模塊是 resource，而加載者是 issuer。如上面的例子中，resource為/path/of/app/style.css，issuer 是/path/of/app/index.js。

如果想要對 issuer 加載者也增加條件限制，則要額外寫一些配置。比如，如果我們只讓/src/pages目錄下的JS可以引用CSS，應(yīng)該如何設(shè)置呢?可以這樣：

issuer: {
	test: /\.js$/,
	include: /src/pages/,
}

可以看到，我們添加了issuer 配置對象，其形式與之前對resource條件的配置并無太大差異。

enforce
enforce用來指定一個(gè)loader的種類，只接收“pre”或“post”兩種字符電類型的值。
請看下面的例子:

rules:[
	{
		test: /\.js$/,
		enforce: 'pre',
		use:'eslint-loader',
	}
]

可以看到，在配置中添加了一個(gè)eslint-loader來對源碼進(jìn)行質(zhì)量檢測，其enforce的值為“pre”，代表它將在所有正常 loader之前執(zhí)行，這樣可以保證其檢測的代碼是被其他loader 更改過的。
類似的，如果某一個(gè)loader 是需要在所有 loader 之后執(zhí)行的也可以指定其enforce為"post"

事實(shí)上，我們也可以不使用enforce而只要保證loader順序是正確的即可。
配置enforce 主要的目的是使模塊規(guī)則更加清晰，可讀性更強(qiáng)，尤其是在實(shí)際工程中,置文件可能達(dá)到上百行的情況，難以保證各個(gè)loader 都按照預(yù)想的方式工作，使用enforce可以強(qiáng)制指定 loader的作用順序。文章來源地址http://www.zghlxwxcb.cn/news/detail-796602.html

到了這里，關(guān)于【W(wǎng)ebpack】預(yù)處理器 - loader配置介紹的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！