webpack-dev-middleware使用手冊

在使用webpack進行檔案打包的時候，為了開發的便利我們會選擇使用webpack-dev-middleware模組。webpack-dev-middleware模組是一個簡化開發流程的模組。它有如下特點：

• 它將打包後的檔案直接寫入記憶體，而非硬碟。
• 每次請求都將獲得最新的打包結果

模組的使用

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)

它依賴兩個引數: compiler, config。 compiler是webpack生成的例項，webpack-dev-middleware模組每次通過該例項進行檔案打包。config是webpack-dev-middleware模組本身的配置物件。它生成的middleware是一個供express使用的中介軟體。通過該中介軟體請求打包後的檔案，能夠取到記憶體中的打包結果。

更多細節

• 通過請求的URL分析出檔案的具體路徑。對於一個請求${publicPath}js/target.js，它會讀取檔案${output.path}\\js\\target.js。如果檔案不存在，它將不會對此請求進行處理。(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
• 模組會監聽檔案，當原始檔內容發生變動時，會重新打包檔案。在lazy模式下，只會在每次請求時重新打包檔案，而不監聽檔案變化。
• 更多模組配置引數介紹