简介
随着前端开发的不断发展，构建工具变得愈加重要。而在构建工具中，Webpack 成为了最热门的选项之一。Webpack 可以对 JS、CSS、图片等资源进行打包。但是它只是提供了一个打包工具，实时的更新则需要结合其他工具。webpack-koa-hot-middleware 就是一个从 webpack-dev-server 中分离出来的中间件。
安装 & 配置
在项目中安装 webpack-koa-hot-middleware：
- --- ------- -------------------------- --
在服务端启用 webpack-koa-hot-middleware：
----- ------- - ------------------- ----- -------------------- - -------------------------------------- ----- --- - --------------- ----- --- - --- ------ ----- ------ - ---------------------------- ----- -------- - ---------------- ----- ---------- - ------------------------------- --------------------
然后在 webpack 配置文件中添加热更新的配置项：
-------------- - -
-- --------
---------- -
------------ -------------------- ----------
-- -----
---- ----
--
-------- -
-- -------
--- ------------------------------------
-
-示例
使用 webpack-koa-hot-middleware 构建启动一个简单的 koa 服务：
----- ---- - ---------------- ----- ------- - ------------------- ----- -------------------- - -------------------------------------- ----- --- - --------------- ----- --- - --- ------ ----- ------ - -------------------------------------- ----- -------- - ---------------- ----- ---------- - ------------------------------ - -- ------ --- -------------------- -----------------
在 webpack.config.dev.js 中开启热更新：
-------------- - -
----- ----
---------- -
------------ -------------------- ----- ----------
---- ----
--
-------- ---- -------------------------------------
--这样，当我们进行代码更新时，中间件会自动替换已有的模块，跟 webpack-dev-server 基本一致。
参数配置
除了基本的配置，webpack-koa-hot-middleware 还有一些额外的配置项。
path: 用于识别客户端的更新脚本路径，默认为/__webpack_hmr。heartbeat: 心跳间隔时间，用于检查客户端是否存活。默认为 1000 毫秒。log: 是否打印日志，默认为console.log。overlay: 如果编译出错，是否显示编译错误的信息，值为true则显示黑色的全屏遮罩，默认为false。
以上是常用的配置项，其他配置项可以在官方文档中查看。
总结
webpack-koa-hot-middleware 在实现 webpack 热更新方面表现非常优秀，同时提供了很多可配置的选项。使用 webpack-koa-hot-middleware 可以使我们不必依赖于 webpack-dev-server，同时还可以根据项目具体情况进行个性化定制。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671058dd3466f61ffdd38