在使用webpack進(jìn)行文件打包的時(shí)候，為了開發(fā)的便利我們會(huì)選擇使用webpack-dev-middleware模塊。webpack-dev-middleware模塊是一個(gè)簡(jiǎn)化開發(fā)流程的模塊燃异。它有如下特點(diǎn)：
- 它將打包后的文件直接寫入內(nèi)存，而非硬盤翎卓。
- 每次請(qǐng)求都將獲得最新的打包結(jié)果
模塊的使用
var compiler = require('webpack')({
output: {
path: 'd:\\project\\dist'
}
})
var config = {
publicPath: '/static/',
index: '../index.html'
}
var middleware = require('webpack-dev-middle')(compiler, config)
var app = require('express')()
app.use(middleware)
它依賴兩個(gè)參數(shù): compiler, config。 compiler是webpack生成的實(shí)例，webpack-dev-middleware模塊每次通過(guò)該實(shí)例進(jìn)行文件打包阎抒。config是webpack-dev-middleware模塊本身的配置對(duì)象。它生成的middleware是一個(gè)供express使用的中間件消痛。通過(guò)該中間件請(qǐng)求打包后的文件且叁，能夠取到內(nèi)存中的打包結(jié)果。
更多細(xì)節(jié)
- 通過(guò)請(qǐng)求的URL分析出文件的具體路徑秩伞。對(duì)于一個(gè)請(qǐng)求
${publicPath}js/target.js逞带，它會(huì)讀取文件${output.path}\\js\\target.js。如果文件不存在纱新，它將不會(huì)對(duì)此請(qǐng)求進(jìn)行處理掰担。(output.path為webpack打包后的輸出目錄，publicPath為webpack-dev-middle模塊的配置)怒炸。比如webpack將文件打包到d:\\project\\dist\\，publicPath配置為/static/毡代。請(qǐng)求的URL為/static/js/target.js時(shí)阅羹，webpack-dev-middleware模塊會(huì)讀取文件d:\\project\\dist\\js\\target.js。 - 如果URL請(qǐng)求的不是具體文件而是目錄教寂，它會(huì)讀取文件
${output.path}${index}(index為webpack-dev-middle模塊的配置)捏鱼。比如比如webpack將文件打包到d:\\project\\dist\\，publicPath配置為/static/酪耕，index配置為../index.html导梆。請(qǐng)求的URL為/static/時(shí)，它會(huì)讀取文件d:\\project\\index.html - 模塊會(huì)監(jiān)聽文件，當(dāng)源文件內(nèi)容發(fā)生變動(dòng)時(shí)看尼，會(huì)重新打包文件递鹉。在lazy模式下，只會(huì)在每次請(qǐng)求時(shí)重新打包文件藏斩，而不監(jiān)聽文件變化躏结。
- 更多模塊配置參數(shù)介紹
