文章目錄
- 使用
- loader和plugin區別
- 鏈式呼叫多個loader
- 模擬loader實作
- 模擬一
- 模擬二
Loader(加載器) 是 webpack 的核心之一，它用于將不同型別的檔案轉換為 webpack 可識別的模塊，
使用
module: {
loaders: [
{
test: /\.css$/,
use: ['style-loader']
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
]
}
loader和plugin區別
loader是用來對模塊的源代碼進行轉換,而插件目的在于解決 loader 無法實作的其他事，
plugin可以在任何階段呼叫,能夠跨Loader進一步加工Loader的輸出,執行預先注冊的回呼,使用compilation物件做一些更底層的事情，
鏈式呼叫多個loader
當鏈式呼叫多個 loader 的時候，請記住它們會以相反的順序執行，取決于陣列寫法格式，從右向左或者從下向上執行，
- 最后的 loader 最早呼叫，將會傳入原始資源內容，
- 第一個 loader 最后呼叫，期望值是傳出 JavaScript 和 source map（可選），
- 中間的 loader 執行時，會傳入前一個 loader 傳出的結果，
webpack資源加載類似作業管道，可以使用多個loader，輸出結果必須是標準的js代碼
例子：
//webpack.config.js
{
test: /\.js/,
use: [
'bar-loader',
'foo-loader'
]
}
foo-loader 被傳入原始資源，bar-loader 將接收 foo-loader 的產出，回傳最終轉化后的模塊(js代碼)和一個 source map（可選）
模擬loader實作
模擬一
loader 將會處理 .txt 檔案，并且將任何實體中的 [name] 直接替換為 loader 選項中設定的 name，然后回傳包含默認匯出文本的 JavaScript 模塊，
//src/loader.js
import { getOptions } from 'loader-utils';
export default function loader(source) {
const options = getOptions(this);
source = source.replace(/\[name\]/g, options.name);
return `export default ${ JSON.stringify(source) }`;
};
使用：
module: {
rules: [{
test: /\.txt$/,
use: {
loader: path.resolve(__dirname, '../src/loader.js'),
options: {
name: 'Alice'
}
}
}]
}
模擬二
模擬簡單的style-loader的功能，
//將css插入到head標簽內部
module.exports = function (source) {
let script = (`
let style = document.createElement("style");
style.innerText = ${JSON.stringify(source)};
document.head.appendChild(style);
`);
return script;
}
使用
resolveLoader: {
modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{
test: /\.css$/,
use: ['style-loader']
},
參考https://www.webpackjs.com/contribute/writing-a-loader/
本文鏈接https://blog.csdn.net/qq_39903567/article/details/115334778
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/271293.html
標籤：其他