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

時間 2019-11-06

標籤開始發佈上線如何自定義一個 webpack loader 简体版

原文原文鏈接

關於

前兩天在使用webpack搭建移動端web的時候,須要使用到flexible.js動態修改html的font-size。考慮到只有幾行代碼，我想把flexible.js鑲嵌到<head>中,同時我但願可以隨時修改它的源碼,而且最後輸出到html中是壓縮事後的代碼。javascript

因爲沒有找到相似於我描述的這類插件，我決定本身動手寫一個。html

什麼是webpack loader?

webpack loader 是 webpack 的預處理工具,除了javascript,還能夠處理任何靜態資源文件。webpack loader 至關於gulp的task,咱們能夠經過它將typeScript轉換成javascript,能夠將圖片轉換成 data URL等等。java

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

1. 建立一個github倉庫

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

初始化項目

首先簽出你的git倉庫

git clone https://github.com/Linnanli/easy-test-loader.git
複製代碼

初始化npm

npm init
複製代碼

keywords,author,license這幾個是比較關鍵的，keywords用於關鍵字檢索,author是插件的做者署名,license是你的軟件許可證。webpack

建立.gitignore和.npmignore

由於 node_modules 文件是不提交到git倉庫和npm的因此須要建立兩個配置文件,讓git和npm忽略掉它。git

建立LICENSE軟件許可證

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

編寫代碼

首先建立一個index.js文件,也就是這個項目的入口文件,這個index文件返回一個function,webpack獲取到這個方法後就會執行它並傳入一些參數。web

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

複製代碼

上面這個例子就是一個很簡單的例子，獲取數據並返回。咱們能夠在這個例子上多加幾行代碼,讓loader在requirejs代碼後能夠直接返回一個能夠內聯到html中的javascript。chrome

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和例子能夠參考官網。npm

測試

首先咱們須要在本地的webpack中調用到自定義的loader,可使用npm link將loader連接到項目的node_modules目錄下。

將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

複製代碼

在咱們的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中查看

發佈到 npm

上面咱們已經確保測試經過,接下來就是發佈到npm上,而後咱們之後就能夠經過npm install命令直接下載使用了。

首先咱們要先把代碼push到github上

添加全部文件

git add -A
複製代碼

提交全部更改到暫存區

git commit -m "init"
複製代碼

push 到github

git push
複製代碼

發佈到npm

在發佈以前須要先註冊 npm 帳號,而後使用npm adduser將帳號添加至本地的npm。

$ npm adduser
複製代碼

將loader發佈到npm上(若是發佈失敗是重名的話,能夠在package.json文件中修改name)

npm publish
複製代碼

下載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下唄~感謝支持~。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。