webpack dev middleware

是什么

一个用来组织包装webpack使其可以变成中间件的容器。

It's a simple wrapper middleware for webpack. It serves the files emitted from webpack over a connect server. This should be used for development only.

要取得webpack编好的文件，需要在request到response的过程中透过express的middleware取得，方法就是透过webpack-dev-middleware

优点

• 不需要一直写入磁盘，所有产生的结果会直接存在内存中
• 在监视模式下（watch mode）下如果文件发生变化，middleware会马上停止提供旧版的bundle，并且会延迟请求的回应直到编译完成，如此一来我们就不需要去观察编译是否结束了
  webpack 提供了 express 的 middleware 让我們可以处理一些静态资源而不是使用 express.static

安装

npm install webpack-dev-middleware -D

使用

var webpackMiddleware = require("webpack-dev-middleware");
app.use(webpackMiddleware(...));

例子

app.use(webpackMiddleware(webpack({
    // webpack options
    // webpackMiddleware takes a Compiler object as first parameter
    // which is returned by webpack(...) without callback.
    entry: "...",
    output: {
        path: "/"
        // no real path is required, just pass "/"
        // but it will work with other paths too.
    }
}), {
    // publicPath is required, whereas all other options are optional

    noInfo: false,
    // display no info to console (only warnings and errors)

    quiet: false,
    // display nothing to the console

    lazy: true,
    // switch into lazy mode
    // that means no watching, but recompilation on every request

    watchOptions: {
        aggregateTimeout: 300,
        poll: true
    },
    // watch options (only lazy: false)

    publicPath: "/assets/",
    // public path to bind the middleware to
    // use the same as in webpack

    index: "index.html",
    // The index path for web server, defaults to "index.html".
    // If falsy (but not undefined), the server will not respond to requests to the root URL.

    headers: { "X-Custom-Header": "yes" },
    // custom headers

    mimeTypes: { "text/html": [ "phtml" ] },
    // Add custom mime/extension mappings
    // https://github.com/broofa/node-mime#mimedefine
    // https://github.com/webpack/webpack-dev-middleware/pull/150

    stats: {
        colors: true
    },
    // options for formating the statistics

    reporter: null,
    // Provide a custom reporter to change the way how logs are shown.

    serverSideRender: false,
    // Turn off the server-side rendering mode. See Server-Side Rendering part for more info.
}));