webpack-dev-middleware 是一个可以结合 Express 或者 Koa 使用的中间件，它可以将 Webpack 打包出来的资源直接在内存中读取和发送到浏览器，而不需要每次都写入到磁盘。这个中间件可以让你在开发的时候享受到 Webpack 带来的很多便利，例如热更新、热模块替换等等。
安装与使用
可以使用 npm 安装：
npm install webpack-dev-middleware --save-dev
然后在你的项目中使用它：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - ------------------- ----- -------------------- - ---------------------------------- ----- ------------- - ------------------------------- ----- --- - ---------- ----- -------- - ----------------------- -------------------------------------- - ----------- ------------------------------- ---- ---------------- -------- -- - -------------------- --- --------- -- ---- ---------- ---
这样，当我们运行 npm run dev 的时候，Webpack 会将打包好的资源存到内存中并启动服务。
参数
webpack-dev-middleware 有很多可配置的参数，我们可以根据自己的需要进行调整。下面是一些常见参数的功能和作用：
- noInfo：为
true时，终端不输出打包过程中的信息。 - quiet：为
true时，终端不输出任何信息。 - publicPath：代表静态文件访问的路径，可以设置成 CDN 上的路径或者相对路径等等。
- stats：
webpack-stas-bar相关配置，比如颜色、更新速度等等。 - watchOptions：Webpack 热更新相关配置，例如轮询的时间间隔、是否忽略某些文件等等。
更详细的参数可以参考官方文档：webpack dev middleware。
与 Express 或 Koa 结合使用
webpack-dev-middleware 适用于 Express 和 Koa，它们分别提供了 app.listen 和 app.use 开启服务的方法，因此在使用中间件的时候，只需要将中间件作为参数传入即可。
下面一张图的地址为 http://localhost:3000，使用 Express 结合 webpack-dev-middleware 作为中间件开启了一个服务，因此我们可以看到前端打包的资源都可以直接访问到。
热更新与热模块替换
webpack-dev-middleware 的优点之一就是可以使用热更新和热模块替换。在使用热更新的时候，我们可以在 entry 中通过 webpack-hot-middleware 去开启。下面是一个简单的配置示例：
entry: {
main: [
'webpack-hot-middleware/client?noInfo=true',
path.resolve(__dirname, './src/index.js')
]
}使用热更新的话比较简单，这里主要讲一下热模块替换的使用。
当我们想要替换一个模块的时候，我们需要在模块中打上一个热加载的标志。下面是两种常见的写法：
方法 1
if (module.hot) {
module.hot.accept()
}这个方法较为通用，我们可以在任何一个模块中使用，当模块被替换的时候，会重新执行这个模块的代码。
方法 2
module.hot.accept('./app', () => {
// 更新模块中的方法
app.init()
})这个方法是通过监听特定的模块或者文件来实现的，当文件被修改的时候，会重新执行回调函数。
总结
本文介绍了如何结合 webpack-dev-middleware 进行前端开发，包括安装、使用、参数调整，以及热更新和热模块替换的使用。在实际开发中，借助 Webpack 的打包机制和热更新功能能够极大地提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c1353983d39b4881591833