最近負(fù)責(zé)的Weex項(xiàng)目涉及到一些構(gòu)建上的問(wèn)題，需要通過(guò)自定義webpack的loader去實(shí)現(xiàn)，于是學(xué)習(xí)了一下這方面的知識(shí)，寫(xiě)一篇文章做個(gè)總結(jié)，以免遺忘。

webpack想必前端圈的人都知道了，大多數(shù)人也都或多或少的用過(guò)。簡(jiǎn)單的說(shuō)就是它能夠加載資源文件，并對(duì)這些文件進(jìn)行一些處理，諸如編譯、壓縮等，最終一起打包到指定的文件中。可以說(shuō)，它作為一個(gè)打包工具，在前端工程化浪潮中，起到了中流砥柱的作用。

那webpack其中非常重要的一環(huán)就是，能夠?qū)虞d的資源文件，進(jìn)行一些處理。比如把less、sass文件編譯成css文件，負(fù)責(zé)這個(gè)處理過(guò)程的，就是webpack的loader。

什么是loader

我們都知道webpack作為當(dāng)下最火的一個(gè)前端構(gòu)建工具，具有很多很實(shí)用的功能，loader就是其中之一。說(shuō)的通俗一點(diǎn)，loader就是用于對(duì)模塊的源碼進(jìn)行轉(zhuǎn)換。對(duì)于做Android的同學(xué)，大家可以把它想象成gradle中的transform task。

loader怎么用

在平時(shí)的開(kāi)發(fā)過(guò)程中，loader的使用也是非常常見(jiàn)的，我們可以在工程的webpack.config.js中定義：

module: {
 rules: [
 {
 test: /\.css$/,
 use: [
 'vue-style-loader',
 'css-loader'
 ],
 }, {
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
 loaders: {
 }
 // other vue-loader options go here
 }
 },
 {
 test: /\.(png|jpg|gif|svg)$/,
 loader: 'file-loader',
 options: {
 name: '[name].[ext]?[hash]'
 }
 }
 ]
}

可以看到，對(duì)于css文件，我們使用css-loader，對(duì)于vue文件，我們使用vue-loader，對(duì)于圖片文件，我們使用file-loader。這些loader會(huì)將對(duì)應(yīng)的文件進(jìn)行轉(zhuǎn)換，構(gòu)建出最終的產(chǎn)物。

如何自定義loader

有了上面的經(jīng)驗(yàn)，我們?cè)撊绾巫远x一個(gè)loader呢？其實(shí)也是非常簡(jiǎn)單的。

首先我們創(chuàng)建一個(gè)js文件，就取名叫test-loader吧。

var loaderUtils = require('loader-utils');

module.exports = function(source) {
 console.log("start process code...");

 var options = loaderUtils.getOptions(this) || {};
 if(options !== {}) {
 var replaceMap = options["replaceMap"];
 for(var key in replaceMap) {
 console.log(source);
 source = source.replace(key, replaceMap[key]);
 console.log(source);
 }
 }

 return source;
};

這就是全部的代碼了，其實(shí)一個(gè)loader內(nèi)部就是一個(gè)node模塊，代碼的編寫(xiě)就和平時(shí)寫(xiě)node一樣就ok了。

test-loader的邏輯就是獲取到設(shè)置的option，并且做一個(gè)文本的替換。

假設(shè)我們還有2個(gè)js文件，分別是test.js和index.js

test.js

const str = 'test is loaded';
module.exports = str;

index.js

const test = require('./src/test');
console.log(test);

然后我們?cè)趙ebpack.config.js中加入我們自己的test-loader。

{
 test: /\.js$/,
 loader: 'test-loader',
 exclude: /node_modules/,
 options: {
 replaceMap: {
 "loaded": "yeah"
 }
 }
}

其中options中，我們將“l(fā)oaded”字符串替換成“yeah”。

但是我們的loader并沒(méi)有上傳到npm中，所以我們還需要在webpack.config.js中加入下面這段代碼：

resolveLoader: {
 modules: [path.join(__dirname, './src/loaders'), 'node_modules']
}

用于加載本地loader。

這樣我們最終構(gòu)建出來(lái)的產(chǎn)物中，所有的“l(fā)oaded”字符串就會(huì)被替換成“yeah”了。

小結(jié)

這篇文章非常淺顯，主要就是講了一下loader的使用方式，其實(shí)我們熟知的很多l(xiāng)oader都是這么做的，只不過(guò)是業(yè)務(wù)邏輯上的復(fù)雜程度不同而已，大家也可以自己試試看。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com