webpack中打包後端模板的思路

目前來說，由於seo需要，前端需要配合中間層使用後端渲染。當前的構建中，我們的構建會全量將jade移入相應的dest檔案，修改後會對對應的檔案進行重新複製移動，但當我們使用webpack的時候，後端模板的處理變成了一件頭疼的事。

如果要用webpack，我們首先要處理的便是模板檔案中引用的靜態資源的問題。我們應該做的事情是想如何將jade資源通過自己的手段分析，達到webpack一同輸出的目的。

由於我們的jade模板是通過後端渲染輸出的，產生的模板必然需要是jade模板。此時模組市場上常用的html-webpack-plugin，html-webpack-plugin-pug,

pug-webpack-html-plugin等等外掛程式並不能滿足我們的需求。於是只好按著自己的思路造個方輪子了。。。

入口區分

在我們的專案中，jade用作內容輸入，布局，公共模組，混入方法等。但乙個專案的入口一定在該專案下，一般叫index.jade。由於目前某些頁面的入口模板命名並非index.jade，我們可以通過給檔案加入入口字首或者放入乙個標誌資料夾進行入口區分。

靜態資源解析

在模板中，我們有時候會引用如下靜態資源

// 通用js靜態資源
+js([
'common/***/***.js'
], 'common/***/***.js')
// 通用css靜態資源
+css([
'common/***/***x.css'
], [
'common/***/***x.css'
])// jade模板中使用的靜態資源
img(src="aaaa/bbbb/ccc.png")
div(style="background:url(aaaa/bbbb/cccc.png)")
// jade擴充套件的布局模板
extends ***xx.jade
// jade包涵模組
include ***xx.jade

其次是其他資源，由於是jade模板引用，所以不會通過webpack走file-loader將靜態資源移動到相應位置。此時我們就必須正則出來這些資源進行相應的移動處理了。

var jadesource = fs.readfilesync('***x.jade', 'utf-8');
jadesource.replace(/extends\s*(\s+)|include\s*(\s+)|src\s*\=\s*"(\s+)"|src\s*\=\s*'(\s+)'/g, function (matched, catched) )

我們獲得了這些資源，並不會去無窮無盡的一遍一遍讀寫，畢竟重複讀寫明顯蛋疼。這個時候我們需要稍微做乙個快取系統，讓多個共同資源不會重複讀寫。思路很簡單，用map，可控引數cache，以及檔案的最後修改時間來判斷即可。

function jadestat(path, cache) 
this.deps = this.getdeps();
}jadestat.prototype.update = function () 
this.deps = this.getdeps();
}jadestat.prototype.getname = function () 
jadestat.prototype.getnowstat = function () 
jadestat.prototype.getcontent = function () 
return fs.readfilesync(this.path, 'utf-8');
}jadestat.prototype.getdeps = function () )
return deps;
}var cache = {};
function myexamplewebpackplugin(options = {}) ;
compiler.plugin('emit', (compilation, callback) => 
let jadestat = map[p];
if (!firstinit && jadestat.stat.mtime !== jadestat.getnowstat().stat.mtime) 
})for (var stat of cache) ,
size: function() };}
callback();
});};

後續問題

在我們的專案中，publicpath是指向www/$的，所以必須處理好output...

webpack中打包後端模板的思路

Vue工程模板檔案 webpack打包

《webpack的打包開發》

webpack不打包特定的檔案

webpack中打包後端模板的思路

Vue工程模板檔案 webpack打包

《webpack的打包開發》

webpack不打包特定的檔案

相關推薦