在使用webpack進(jìn)行文件打包的時候，為了開發(fā)的便利我們會選擇使用webpack-dev-middleware模塊。webpack-dev-middleware模塊是一個簡化開發(fā)流程的模塊。它有如下特點(diǎn)：
- 它將打包后的文件直接寫入內(nèi)存，而非硬盤。
- 每次請求都將獲得最新的打包結(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)
它依賴兩個參數(shù): compiler, config。 compiler是webpack生成的實(shí)例，webpack-dev-middleware模塊每次通過該實(shí)例進(jìn)行文件打包。config是webpack-dev-middleware模塊本身的配置對象。它生成的middleware是一個供express使用的中間件。通過該中間件請求打包后的文件，能夠取到內(nèi)存中的打包結(jié)果。
更多細(xì)節(jié)
- 通過請求的URL分析出文件的具體路徑。對于一個請求
${publicPath}js/target.js，它會讀取文件${output.path}\\js\\target.js。如果文件不存在，它將不會對此請求進(jìn)行處理。(output.path為webpack打包后的輸出目錄，publicPath為webpack-dev-middle模塊的配置)。比如webpack將文件打包到d:\\project\\dist\\，publicPath配置為/static/。請求的URL為/static/js/target.js時，webpack-dev-middleware模塊會讀取文件d:\\project\\dist\\js\\target.js。 - 如果URL請求的不是具體文件而是目錄，它會讀取文件
${output.path}${index}(index為webpack-dev-middle模塊的配置)。比如比如webpack將文件打包到d:\\project\\dist\\，publicPath配置為/static/，index配置為../index.html。請求的URL為/static/時，它會讀取文件d:\\project\\index.html - 模塊會監(jiān)聽文件，當(dāng)源文件內(nèi)容發(fā)生變動時，會重新打包文件。在lazy模式下，只會在每次請求時重新打包文件，而不監(jiān)聽文件變化。
- 更多模塊配置參數(shù)介紹
