這次帶給大家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';
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);
}
}
);
});
}說明上面是webpack原始碼中loader執行關鍵步驟,遞歸的方式執行loader,執行機流程似於express中間件機制
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是webpack+loader實戰案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
