從零開始到釋出上線，如何自定義一個webpack loader

林楠發表於2018-05-16
Web

關於

前兩天在使用webpack搭建移動端web的時候,需要使用到flexible.js動態修改html的font-size。考慮到只有幾行程式碼，我想把flexible.js鑲嵌到<head>中,同時我希望能夠隨時修改它的原始碼,並且最後輸出到html中是壓縮過後的程式碼。

由於沒有找到類似於我描述的這類外掛，我決定自己動手寫一個。

什麼是webpack loader?

webpack loader 是 webpack 的預處理工具,除了javascript,還可以處理任何靜態資原始檔。webpack loader 相當於gulp的task,我們可以通過它 將typeScript轉換成javascript,可以將圖片轉換成 data URL等等。

正文:如何編寫併發布webpack loader

1. 建立一個github倉庫

具體如何建立我就不再贅述了,沒建立過的同學到github官網摸索下就會了。倉庫名稱使用 xxx-loader。

從零開始到釋出上線，如何自定義一個webpack loader

初始化專案

  1. 首先簽出你的git倉庫
git clone https://github.com/Linnanli/easy-test-loader.git
複製程式碼
  1. 初始化npm
npm init
複製程式碼

keywords,author,license這幾個是比較關鍵的，keywords用於關鍵字檢索,author是外掛的作者署名,license是你的軟體許可證。

從零開始到釋出上線，如何自定義一個webpack loader

  1. 建立.gitignore和.npmignore

因為 node_modules 檔案是不提交到git倉庫和npm的所以需要建立兩個配置檔案,讓git和npm忽略掉它。

  1. 建立LICENSE軟體許可證

你想要使用什麼樣的許可證照可以到[license]上選擇並copy下來。

  1. 最後的目錄結構

從零開始到釋出上線，如何自定義一個webpack loader

編寫程式碼

首先建立一個index.js檔案,也就是這個專案的入口檔案,這個index檔案返回一個function,webpack獲取到這個方法後就會執行它並傳入一些引數。

//一個簡單的loader,獲取引數並返回給webpack或者下一個loader。
module.exports = function(source){
    return `module.exports = ${source}`);
}

複製程式碼

上面這個例子就是一個很簡單的例子，獲取資料並返回。我們可以在這個例子上多加幾行程式碼,讓loader在requirejs程式碼後可以直接返回一個可以內聯到html中的javascript。


module.exports = function(source){
    // 替換source字串中的回車符和換行符,並拼接到<script>標籤中
    let result = source.replace(/\n/g, "\\n")
                    .replace(/\r/g, "\\r")
                    .replace(/(.*)/, `module.exports = "<script>$1</script>"`);
    return result;
}

複製程式碼

更多api和例子可以參考官網。

測試

首先我們需要在本地的webpack中呼叫到自定義的loader,可以使用npm link將loader連結到專案的node_modules目錄下。

  1. 將easy-test-loader連結到全域性環境中
npm link
複製程式碼

控制檯輸出

npm notice created a lockfile as package-lock.json. You should commit this file.
up to date in 0.091s
C:\Users\2017-10-16\AppData\Roaming\npm\node_modules\easy-test-loader -> C:\Users\2017-10-16\Documents\github\easy-test-loader

複製程式碼
  1. 在我們的web專案中連結easy-test-loade,這時候就相當於把其他資料夾下面的easy-test-loader指向本專案下的node_modules資料夾下。
npm link easy-test-loader
複製程式碼

最後控制檯輸出

C:\Users\2017-10-16\Documents\github\multi-page-webpack\node_modules\easy-test-loader -> C:\Users\2017-10-16\AppData\Roaming\npm\node_modules\easy-test-loader -> C:\Users\2017-10-16\Documents\github\easy-test-loader
複製程式碼

最後我們在index.html中測試下easy-test-loader的功能是否正常


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <!-- 在模板中require flexible.js -->
    <%= require('easy-test-loader!common/lib/flexible.js') %>
</head>
<body>
</body>
</html>

複製程式碼

最後輸出的指令碼我們可以在chrome中檢視

從零開始到釋出上線，如何自定義一個webpack loader

釋出到 npm

上面我們已經確保測試通過,接下來就是釋出到npm上,然後我們以後就可以通過npm install命令直接下載使用了。

  1. 首先我們要先把程式碼push到github上

新增所有檔案

git add -A
複製程式碼

提交所有更改到暫存區

git commit -m "init"
複製程式碼

push 到github

git push
複製程式碼
  1. 釋出到npm

在釋出之前需要先註冊 npm 賬號,然後使用npm adduser將賬號新增至本地的npm。

$ npm adduser
複製程式碼

將loader釋出到npm上(如果釋出失敗是重名的話,可以在package.json檔案中修改name)

npm publish
複製程式碼
  1. 下載easy-test-loader
npm install easy-test-loader --save-dev
複製程式碼

安裝完成後我們在專案中 require 一下 easy-test-loader 測試下是否程式碼沒有問題就OK啦。

最後

介紹我寫的loader外掛 [inline-script-loader],支援內嵌到html中並壓縮js程式碼,還支援指令碼型別定義。

這裡還有一個用到inline-script-loader的小專案,大家可以做下參考 [activity-h5]

如果大家有好的建議可以聯絡我,有空就star下唄~感謝支援~。

相關文章