loader概念
loader是用來加載處理各種形式的資源,本質上是壹個函數, 接受文件作為參數,返回轉化後的結構。
loader 用於對模塊的源代碼進行轉換。loader 可以使妳在 import 或"加載"模塊時預處理文件。因此，loader 類似於其他構建工具中“任務(task)”，並提供了處理前端構建步驟的強大方法。loader 可以將文件從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯圖像轉換為 data URL。loader 甚至允許妳直接在 JavaScript 模塊中 import CSS文件！
loader和plugin區別
之前壹篇文章中介紹了plugin機制,和今天研究的對象loader,他們兩者在壹起極大的拓展了webpack的功能。它們的區別就是loader是用來對模塊的源代碼進行轉換,而插件目的在於解決 loader 無法實現的其他事。為什麽這麽多說呢?因為plugin可以在任何階段調用,能夠跨Loader進壹步加工Loader的輸出,在構建運行期間,觸發事件,執行預先註冊的回調,使用compilation對象做壹些更底層的事情。
loader用法
配置
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader'
}
]
}
]
}內聯
import Styles from 'style-loader!css-loader?modules!./styles.css';CLI
webpack --module-bind 'css=style-loader!css-loader'說明 上面三種使用方法作用都是將壹組鏈式的 loader, 按照從右往左的順序執行,loader 鏈中的第壹個 loader 返回值給下壹個 loader。先使用css-loader解析 @import 和 url()路徑中指定的css內容,然後用style-loader 會把原來的 CSS 代碼插入頁面中的壹個 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;
}
//使用方式1
resolveLoader: {
modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{
test: /\.css$/,
use: ['style-loader']
},
//使用方式2
//將自己寫的loaders發布到npm倉庫,然後添加到依賴,按照方式1中的配置方式使用即可說明 上面是壹個簡單的loader實現,同步的方式執行,相當於實現了style-loader的功能。
loader原理
function iteratePitchingLoaders(options, loaderContext, callback) {
var currentLoaderObject = loaderContext.loaders[loaderContext.loaderIndex];
// load loader module
loadLoader(currentLoaderObject, function(err) {
var fn = currentLoaderObject.pitch;
runSyncOrAsync(
fn,
loaderContext, [loaderContext.remainingRequest, loaderContext.previousRequest, currentLoaderObject.data = {}],
function(err) {
if(err) return callback(err);
var args = Array.prototype.slice.call(arguments, 1);
if(args.length > 0) {
loaderContext.loaderIndex--;
iterateNormalLoaders(options, loaderContext, args, callback);
} else {
iteratePitchingLoaders(options, loaderContext, callback);
}
}
);
});
}相信看了本文案例妳已經掌握了方法，更多精彩請關註Gxl網其它相關文章！
推薦閱讀：
怎樣在Vue中使用Sortable
如何使用JS實現運算符重載