loader 就是乙個 node 模組webpack.config.jsloader 匯出乙個函式,loader 會在轉換源模組(resource)的時候呼叫該函式
loader 的功能:把源模組轉換成通用模組
const path =
require
('path'
)module.exports =
, module:]}
}
自定義的loader
markdown-loader.js
const marked =
require
('marked'
)module.
exports
= source =>
`// 或者 返回乙個html 字串交給下乙個 loader 處理
return html
}
loader複製資源檔案從輸入到輸出的轉換
對於同乙個成員可以依次使用多個loader 例如 css-loader->style-loader
將 markdown-loader.js 發布到全域性
npm link
在我們的web專案中鏈結markdown-loader,這時候就相當於把其他資料夾下面的markdown-loader指向本專案下的node_modules資料夾下。
npm link markdown-loader
需要有乙個存放**地方,github或者gitee都行
新增所有檔案
git add -
a提交所有更改到暫存區
git commit -m "init"
push 到github
git push
發布
需要有npm 自己的賬號
npm adduser 將賬號新增至本地的npm
npm publish 將loader發布npm上
(發布重名,在package
.json檔案中修改name)
Webpack 自定義外掛程式
1,webpack背景知識 一款前端專案開發構建工具。或者用gulp。前後端分離的開發環境,解析不同的資源檔案,統一打包分包,按需載入,優化等。主要構成,入口 出口,loader和plugins model rules等配置,webpack自身提供外掛程式如 分析 壓縮 html provider等...
webpack效能優化,自定義配置
以下是自己的總結 1,使用靜態資源路徑 在publicpath中寫上自己的cdn的路徑,設定之後會在所有的資源前加上這個路徑字首,這樣在頁面在請求資源的時候,就會去cdn上查詢請求資源 2,縮小檔案搜尋範圍 在loader的rules中設定include,設定之後,就只在設定的路徑中區搜尋,excl...
webpack 編寫自定義外掛程式方式簡單介紹
使用 webpack api 中的 compiler 鉤子,可以在特定的時期進行操作 compiler 模組是 webpack 的支柱引擎,它通過 cli 或 node api 傳遞的所有選項,建立出乙個 compilation 例項。它擴充套件 extend 自 tapable 類,以便註冊和呼叫...