大家好,我是奶綠茶
今天來深入研究 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 的特性