webpack pug-loader, pug-html-loader

Milk Midi
1 min readSep 4, 2017

--

大家好,我是奶綠茶
今天來深入研究 webpack 的 pug-loader 與 pug-html-loader
在開發 webpack web app
一般都會搭配 HtmlWebpackPlugin 來自動注入 css, js 路徑檔名

1 使用 pug-html-loader

{
test: /\.pug$/,
use: [
'html-loader',
{
loader: 'pug-html-loader',
options: {
pretty: true,
data:{
myVar: '奶綠茶'
}
},
},
],
},

new HtmlWebpackPlugin(
{
template:'src/html/index.pug',
filename:'index.html',
});

這樣在 pug 檔就可以直接取用 myVar 變數
而且圖片路徑可以用 ~

div=myVar
img(src="~img/logo.png")

問題來了,如果我有很多的 pug 檔,想要每個傳不同的變數怎麼辦?

2. 改用 pug-loader
這就就可以在 HtmlWebpackPlugin 傳 data 變數

{
test: /\.pug$/,
use: {
loader: 'pug-loader',
options: {
self: true, // 這個要加
pretty: true,
},
},
},
new HtmlWebpackPlugin({
template: './html/index.pug',
data: {
myVar: '奶綠茶'
},
}),
.pug 檔讀取變數
- var myVar = self.htmlWebpackPlugin.options.data.myVar
div=myVar
img(src="~img/logo.png")

決解了可以傳不同的參數
但 pug-loader 不支援 img 用 ~ 寫法
一定要寫成 img(src=require(“img/logo.png”))

想要傳不同參數,又想要img可以用 ~ 寫法
那就直接在 HtmlWebpackPlugin 改寫
傳參數的規格請參考
https://github.com/webpack/loader-utils

const loader = '!!html-loader!pug-html-loader'
const data = JSON.stringify({data:{myVar:'奶綠茶'},pretty:true});
const filePath = '!./src/html/index.pug';
new HtmlWebpackPlugin({
template: loader + '?' + data + filePath ,
filename: 'index.html',
chunks: ['app', 'vendor', 'manifest'],
}),

用 webpack loader order 的特性

https://github.com/webpack/docs/wiki/loaders

--

--