定義
loader用于對模塊的源代碼進行轉換，在imporrt或加載模塊時預處理文件webpack做的事情，僅僅是分析出各種模塊的依賴關系，然后形成資源列表，最終打包生成到指定文件中。
在webpack內部，任何文件都是模塊，不僅僅是js文件
默認情況下，遇到import或者require加載模塊時，webpack只支持對js和json文件的打包，像css、scss、png等這些類型的文件，webpack則無能為力，這時候就需要配置對應的loader進行文件內容的解析。
當webpack碰到不識別的模塊的時候，webpack會在配置當中查找該文件的解析規(guī)則。
使用
配置方式
- 配置文件配置
關于loader的配置，我們是寫在module.rules屬性中- rules是一個數(shù)組的形式，可以配置多個loader
- 每一個loader對應一個對象的形式。test：正則表達式匹配規(guī)則；use:針對匹配到文件類型，調用對應的loader進行處理
module: {
rules: [
// {
// test: /\.css$/, //正則表達式，用于匹配要處理的文件類型
// use: [
// {
// loader:'css-loader'
// }
// ]
// },
// { //簡寫 一個loader，不需要參數(shù)
// test:/\.css$/,
// loader:'css-loader'
// }
{
test: /\.css$/,
// loader執(zhí)行順序從下往上，從右往左
// use: ['css-loader','style-loader']
// css-loader：處理css 由于webpack無法識別
// style-loader：在頁面上生成一個style標簽 把處理好的樣式添加到頁面上
use: ['style-loader', 'css-loader']
}, {
test: /.\less$/,
// less-loader 需要less先將文件轉為css
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
- 內聯(lián)方式配置:在每個 import 語句中顯式指定 loader
import 'css-loader!../css/login.css'
- CLI配置:在 shell 命令中指定它們
特性
-
loader支持鏈式調用， 執(zhí)行順序從下往上，從右往左，鏈中的每個loader會處理之前已處理過的資源，最終變?yōu)?code>js代碼。 -
loader可以是同步的，也可以是異步的 -
loader運行在Node.js中，并且能夠執(zhí)行任何操作 - 插件(
plugin)可以為loader帶來更多特性
可以通過loader的預處理函數(shù)，為js生態(tài)系統(tǒng)提供更多能力。用戶現(xiàn)在可以更加靈活的引入細粒度邏輯，例如：打包、壓縮、語言翻譯和其它更多特性。
常見loader
在頁面開發(fā)過程中，加載除了js之外的內容就需要配置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在工作過程中又找到了需要處理的css，就需要往前找一個loader進行處理
importLoaders:1
}
}
}
]
如果只通過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"]
}
]
less-loader/scss-loader
npm install less-loader -D
rules: [
...,
{
test: /\.css$/,
use: ["style-loader", "css-loader","less-loader"]
}
]
babel前置工具：browserslist
項目開發(fā)過程中需要考慮瀏覽器的兼容性，browserslist幫助我們請求會數(shù)據
可以從caniuse.com中查看目前瀏覽器的使用狀態(tài)
兩種配置方式:
// 方式一：package.json
"browserslist":[
">1%",
"last 2 version",
"not dead"
]
// 方式二：新建.browserslistrc文件
> 1%
last 2 versions
not dead
項目在安裝webpack之后，會帶有browserslist包，里面引入了caniuse-lite
postcss-loader前置：postcss
postcss是通過js轉換css的工具
樣式測試網站地址：https://autoprefixer.github.io/
如果我們不先試用loader而是利用postcss本身通過命令行進行自動添加前綴
-
npm i postcss-cli -D:能夠在命令行使用 -
npm i autoprefixer -D：自動添加前綴
執(zhí)行npx postcss --use autoprefixer -o ret.css ./src/css/test.css
postcss-preset-env：多css處理
如果我們的代碼中還需要進行其它樣式的處理，還需要單獨配置，比如color:#12345678支持8位數(shù)，后面兩位為rgba中的透明度，針對多css處理情況可以使用postcss-preset-env其中包含多個css處理，并且包含autoprefixer
{
test: /\.css$/,
// loader執(zhí)行順序從下往上，從右往左
// use: ['css-loader','style-loader']
// css-loader：處理css 由于webpack無法識別
// style-loader：在頁面上生成一個style標簽 把處理好的樣式添加到頁面上
use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: {
postcssOptions: {
// plugins: [require('autoprefixer'),require('postcss-preset-env')]
plugins: ['postcss-preset-env']
}
}
}]
},
我們項目中，less文件也可能需要用到這個配置，就可以抽離出來
// postcss.config.js
module.exports = {
plugins: [
require('postcss-preset-env')
// require('autoprefixer')
]
}
在webpack.config.js中
use: ['style-loader', 'css-loader',
'postcss-loader',
'less-loader']
file-loader
rules: [
...,
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "file-loader",
options: {
// esModule:false, 不轉為esModule
// placeholder 占位符 [name] 源資源模塊的名稱
// [ext] 源資源模塊的后綴
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "./images",
// 打包后文件的 url
publicPath: './images',
}
}
}
]
url-loader
可以處理理 file-loader 所有的事情，但是遇到圖片格式的模塊，可以選擇性的把圖片轉成 base64 格式的字符串，并打包到 js 中，對小體積的圖片比較合適，大圖片不合適。
rules: [
...,
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
// placeholder 占位符 [name] 源資源模塊的名稱
// [ext] 源資源模塊的后綴
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "./images"
// 打包后文件的 url
publicPath: './images',
// 小于 100 字節(jié)轉成 base64 格式
limit: 100
}
}
}
]
asset module type
在webpack5中內置了，不需要安裝。在webpack5之前采用file-loader或者url-loader處理圖片,在webpack5直接采用aeest進行處理即可。文章來源：http://www.zghlxwxcb.cn/news/detail-694554.html
asset/resource -->file-loader:發(fā)送一個單獨的文件并導出 URL
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
+ assetModuleFilename: 'images/[hash][ext][query]' //導出文件名
},
module: {
rules: [
{
test: /\.png$/,
type: 'asset/resource'
}
]
}
// src/index.js
import icon from './assets/icon.png'
const iconImg = document.createElement('img')
iconImg.style.cssText = 'width: 200px;'
iconImg.src = icon
document.body.appendChild(iconImg)
執(zhí)行webpack可以在dist中可以看到有一個.png文件出現(xiàn)文章來源地址http://www.zghlxwxcb.cn/news/detail-694554.html
asset/inline–>url-loader:導出一個資源的 data URI
module.exports = {
// ...
module: {
rules: [
{
test: /\.png$/,
type: 'asset/resource',
generator: {
filename: 'images/[hash][ext][query]'
}
},
+ {
+ test: /\.svg$/,
+ type: 'asset/inline'
+ }
]
}
}
asset/source–>raw-loader:導出資源的源代碼
module.exports = {
// ...
module: {
rules: [
{
test: /\.png$/,
type: 'asset/resource',
generator: {
filename: 'images/[hash][ext][query]'
}
},
{
test: /\.svg$/,
type: 'asset/inline'
},
+ {
+ test: /\.txt$/,
+ type: 'asset/source'
+ }
]
}
}
到了這里，關于webpack（三）loader的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
