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模式下，只会在每次请求时重新打包文件，而不监听文件变化。
• 更多模块配置参数介绍