webpack dev middleware
2017-12-07 本文已影响0人
Grace_ji
是什么
一个用来组织包装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.
}));