這次帶給大家怎麼使用webpack源碼loader機制，怎麼使用webpack源碼loader機制的注意事項有哪些，下面就是實戰案例，一起來看一下。
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';
webpack --module-bind 'css=style-loader!css-loader'
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原理
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);
}
}
);
});
}以上是怎樣使用webpack源碼loader機制的詳細內容。更多資訊請關注PHP中文網其他相關文章！
