最近負責的Weex項目涉及到一些構建上的問題，需要通過自定義webpack的loader去實現，于是學習了一下這方面的知識，寫一篇文章做個總結，以免遺忘。

webpack想必前端圈的人都知道了，大多數人也都或多或少的用過。簡單的說就是它能夠加載資源文件，并對這些文件進行一些處理，諸如編譯、壓縮等，最終一起打包到指定的文件中?？梢哉f，它作為一個打包工具，在前端工程化浪潮中，起到了中流砥柱的作用。

那webpack其中非常重要的一環就是，能夠對加載的資源文件，進行一些處理。比如把less、sass文件編譯成css文件，負責這個處理過程的，就是webpack的loader。

什么是loader

我們都知道webpack作為當下最火的一個前端構建工具，具有很多很實用的功能，loader就是其中之一。說的通俗一點，loader就是用于對模塊的源碼進行轉換。對于做Android的同學，大家可以把它想象成gradle中的transform task。

loader怎么用

在平時的開發過程中，loader的使用也是非常常見的，我們可以在工程的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]'   }  } ]}

可以看到，對于css文件，我們使用css-loader，對于vue文件，我們使用vue-loader，對于圖片文件，我們使用file-loader。這些loader會將對應的文件進行轉換，構建出最終的產物。

如何自定義loader

有了上面的經驗，我們該如何自定義一個loader呢？其實也是非常簡單的。

首先我們創建一個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;};

這就是全部的代碼了，其實一個loader內部就是一個node模塊，代碼的編寫就和平時寫node一樣就ok了。

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

假設我們還有2個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);

然后我們在webpack.config.js中加入我們自己的test-loader。

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

其中options中，我們將“loaded”字符串替換成“yeah”。

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

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

用于加載本地loader。

這樣我們最終構建出來的產物中，所有的“loaded”字符串就會被替換成“yeah”了。

小結

這篇文章非常淺顯，主要就是講了一下loader的使用方式，其實我們熟知的很多loader都是這么做的，只不過是業務邏輯上的復雜程度不同而已，大家也可以自己試試看。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。