寫在前面
這是webpack實戰系列筆記的第6篇記錄，前幾篇記錄如下：
- 打包第一個應用
- 模塊化與模塊打包
- 資源輸入與輸出
- 一切皆模塊
- 預處理器【上篇】
在上一篇中根據一切皆模塊的思想，學習瞭解了loader：概述、引入、配置及使用。本篇接着上篇的話題，講述常用loader。
在我們項目開發中，尤其是目前流行的單頁面應用，一些新手經常會在loader配置中有一些疑問，比如：
- 對於xx資源應該使用哪個loader？
- 實現xx功能配置哪個loader？
- ...
常用loader介紹
其實，在社區上每天都會有很多loader發佈，開發者在選擇loader的時候要多讀一下loader文檔，瞭解loader用法，優缺點，然後根據需求去挑選。接下來介紹幾種常用loader。
1. babel-loader
作用
babel-loader是用來處理ES6+並將其編譯爲ES5
安裝
npm install babel-loader @babel/core @babel/preset-env
看這條安裝指令，有幾個參數，代表着什麼呢？
- babel-loader：它是使Babel與Webpack協同工作的模塊
- @babel/core：Babel編譯器的核心模塊
- @babel/preset-env：Babel官方推薦的預置器，可根據用戶設置的目標環境自動添加所需要的插件和補丁來編譯ES6+代碼
示例
當然，知道了參數，也需要根據loader文檔注意一些小細節，例如：
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: [
[
'env', {
modules: false
}
]
]
}
}
}
]
說明
-
babel-loader一般對於js後綴文件生效， 而在node_modules中所有插件有大量的js後綴文件，因此需要使用exclude將其排除，避免打包時速度過慢； - 可以看到上面配置中添加了
cacheDirectory: true的配置，意味着會啓用緩存機制，在多次打包時，如果沒有做過改變的模塊不會二次編譯，打包時只重新編譯更改的模塊，以此來加快打包速度； - 另外可以看到
@babel/presets-env中配置爲modules: false，原因是 @babel/presets-env會自動將ES6 Module轉化爲CommonJS形式，會導致Webpack中的tree-shaking特性失效，而將modules配置爲false後悔禁用模塊化語句的轉化，將Module的語法交給Webpack本身去處理，來避免這一問題的發生。 - babel-loader支持從.babelrc文件讀取Babel配置，因此也可以將presets和plugins從Webpack配置文件中提取出來，也能達到相同效果。
2. ts-loader
作用
用於連接Webpack與TypeScript的模塊
安裝
npm install ts-loader typescript
配置
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}
]
說明
學習或使用過typescript的開發者都知道，typescript的配置信息在工程目錄下的tsconfig.jsson中，因此在ts-loader中不配置，直接對tsconfig.json進行配置即可。如：
{
"compilerOptions": {
"target": "es5",
"sourceMap": true
}
}
3. html-loader
作用
用於將HTML文件轉化爲字符串並進行格式化，這使得我們可以把一個HTML片段通過JS加載進來
安裝
npm install html-loader
配置
rules: [
{
test: /\.html$/,
use: 'html-loader'
}
]
使用示例
<!-- header.html -->
<header>
<h1>This is a Header.</h1>
</header>
// index.js
import Header from './header.html'
document.write(Header)
4. vue-loader
作用
vue-loader用於處理.vue組件，類似如下示例形式，常與vue-template-compiler、css-loader配合使用。
安裝
npm install vue-loader vue vue-template-compiler css-loader
包含有：
- vue
- vue-loader
- vue-template-compiler
- css-loader
vue組件示例
// App.vue
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name: 'vue-loader',
data() {
return {
msg: 'vue-loader'
}
}
}
</script>
<style lang="css">
h1{
color: #f00;
}
</style>
配置
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
}
]
此處展示基礎vue-loader示例，更多配置可以參考vue-loader官網文檔
5. file-loader
作用
用於打包文件類型的資源，並返回其PublicPath
安裝
npm install file-loader
配置
以對圖片（png、jpg、jepg、gif）爲例來配置file-loader：
// webpack.config.js
const path = require('path');
module.exports = {
entry: './index.js',
output" {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(png|jpg|jepg|gif)$/,
use: 'file-loader'
}
]
}
}
// index.js 測試
import testPng from './test.png'
console.log(testPng); // caj15a1123d2asf132c123cx132.jpg
6. url-loader
作用
與file-loader類似，不同之處在於用戶可以設置一個文件大小的閾值，小於該閾值時，返回的文件以base64形式編碼，大於該閾值時返回publicPath
安裝
npm install url-loader
配置
rules: [
{
test: /\.(png|jpg|jepg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 10240,
name: '[name].[ext]',
publicPath: './assets-path/'
}
}
}
]
如此，如果目標文件資源大小小於設置的閾值，那麼目標資源將會轉化爲base64形式編碼。
小結
本篇着重接上一篇的loader配置，介紹了幾種常用的loader及其作用和意義，如babel-loader、html-loader、vue-loader等，並配有簡單地配置介紹，目的是對loader有基礎的使用來促進更深的瞭解。迴歸本質，loader就是一個函數，能夠處理相應功能的函數。第一個loader是源文件，之後所有loader是上一個loader的輸出，最後一個loader則是輸出給webpack。
除了JavaScript外，在打包方面另外一個重要工作就是樣式處理。下一篇介紹webpack中對樣式處理的模塊。