1、Webpack 的 Loader
loader 用於對模塊的源代碼進行轉換，在 import 或"加載"模塊時預處理文件
webpack 做的事情，僅僅是分析出各種模塊的依賴關系，然后形成資源列表，最終打包生成到指定的文件中。如下圖所示：
在 webpack 內部中，任何文件都是模塊，不僅僅只是 js 文件
默認情況下，在遇到 import 或者 load 加載模塊的時候，webpack 只支持對 js 文件打包
像 css、sass、png 等這些類型的文件的時候，webpack 則無能為力，這時候就需要配置對應的 loader 進行文件內容的解析
在加載模塊的時候，執行順序如下：
當 webpack 碰到不識別的模塊的時候，webpack 會在配置的中查找該文件解析規則
關於配置 loader 的方式有三種：
-
配置方式（推薦）：在 webpack.config.js 文件中指定 loader
-
內聯方式：在每個 import 語句中顯式指定 loader
-
CLI 方式：在 shell 命令中指定它們
2、配置方式
關於 loader 的配置，我們是寫在 module.rules 屬性中，屬性介紹如下：
-
rules 是一個數組的形式，因此我們可以配置很多個 loader
-
每一個 loader 對應一個對象的形式，對象屬性 test 為匹配的規則，一般情況為正則表達式
-
屬性 use 針對匹配到文件類型，調用對應的 loader 進行處理
代碼編寫，如下形式：
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{
loader: "css-loader",
options: {
modules: true,
},
},
{ loader: "sass-loader" },
],
},
],
},
};
3、特性
這里繼續拿上述代碼，來講講 loader 的特性
從上述代碼可以看到，在處理 css 模塊的時候，use 屬性中配置了三個 loader 分別處理 css 文件
因為 loader 支持鏈式調用，鏈中的每個 loader 會處理之前已處理過的資源，最終變為 js 代碼。順序為相反的順序執行，即上述執行方式為 sass-loader、css-loader、style-loader
除此之外，loader 的特性還有如下：
-
loader 可以是同步的，也可以是異步的
-
loader 運行在 Node.js 中，並且能夠執行任何操作
-
除了常見的通過 package.json 的 main 來將一個 npm 模塊導出為 loader，還可以在 module.rules 中使用 loader 字段直接引用一個模塊
-
插件(plugin)可以為 loader 帶來更多特性
-
loader 能夠產生額外的任意文件
可以通過 loader 的預處理函數，為 JavaScript 生態系統提供更多能力。用戶現在可以更加靈活地引入細粒度邏輯，例如：壓縮、打包、語言翻譯和更多其他特性
3、常見的 loader
在頁面開發過程中，我們經常性加載除了 js 文件以外的內容，這時候我們就需要配置響應的 loader 進行加載
常見的 loader 如下：
-
style-loader: 將 css 添加到 DOM 的內聯樣式標簽 style 里
-
css-loader :允許將 css 文件通過 require 的方式引入，並返回 css 代碼
-
less-loader: 處理 less
-
sass-loader: 處理 sass
-
postcss-loader: 用 postcss 來處理 CSS
-
autoprefixer-loader: 處理 CSS3 屬性前綴，已被棄用，建議直接使用 postcss
-
file-loader: 分發文件到 output 目錄並返回相對路徑
-
url-loader: 和 file-loader 類似，但是當文件小於設定的 limit 時可以返回一個 Data Url
-
html-minify-loader: 壓縮 HTML
-
babel-loader :用 babel 來轉換 ES6 文件到 ES
下面給出一些常見的 loader 的使用：
css-loader
分析 css 模塊之間的關系，並合成⼀個 css
npm install --save-dev css-loader
rules: [
...,
{
test: /\.css$/,
use: {
loader: "css-loader",
options: {
// 啟用/禁用 url() 處理
url: true,
// 啟用/禁用 @import 處理
import: true,
// 啟用/禁用 Sourcemap
sourceMap: false
}
}
}
]
如果只通過 css-loader 加載文件，這時候頁面代碼設置的樣式並沒有生效
原因在於，css-loader 只是負責將.css 文件進行一個解析，而並不會將解析后的 css 插入到頁面中
如果我們希望再完成插入 style 的操作，那么我們還需要另外一個 loader，就是 style-loader
style-loader
把 css-loader 生成的內容，用 style 標簽掛載到頁面的 head 中
npm install --save-dev style-loader
rules: [
...,
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
同一個任務的 loader 可以同時掛載多個，處理順序為：從右到左，從下往上
less-loader
開發中，我們也常常會使用 less、sass、stylus 預處理器編寫 css 樣式，使開發效率提高，這里需要使用 less-loader
npm install less-loader -D
rules: [
...,
{
test: /\.css$/,
use: ["style-loader", "css-loader","less-loader"]
}
]
raw-loader
在 webpack 中通過 import 方式導入文件內容，該 loader 並不是內置的，所以首先要安裝
npm install --save-dev raw-loader
然后在 webpack.config.js 中進行配置
module.exports = {
...,
module: {
rules: [
{
test: /\.(txt|md)$/,
use: 'raw-loader'
}
]
}
}
file-loader
把識別出的資源模塊，移動到指定的輸出⽬目錄，並且返回這個資源在輸出目錄的地址(字符串)
npm install --save-dev file-loader
然后在 webpack.config.js 中進行配置
rules: [
...,
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "file-loader",
options: {
// placeholder 占位符 [name] 源資源模塊的名稱
// [ext] 源資源模塊的后綴
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "./images",
// 打包后文件的 url
publicPath: './images',
}
}
}
]
url-loader
可以處理理 file-loader 所有的事情，但是遇到圖片格式的模塊，可以選擇性的把圖片轉成 base64 格式的字符串，並打包到 js 中，對小體積的圖片比較合適，大圖片不合適。
npm install --save-dev url-loader
rules: [
...,
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
// placeholder 占位符 [name] 源資源模塊的名稱
// [ext] 源資源模塊的后綴
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "./images"
// 打包后文件的 url
publicPath: './images',
// 小於 100 字節轉成 base64 格式
limit: 100
}
}
}
]
轉自 微信公眾號：JS 每日一題