DevServer 是一个方便开发的小型 HTTP 服务器, DevServer 其实是基于 webpack-dev-middleware 和 Expressjs 实现的, 而 webpack-dev-middleware 其实是 Expressjs 的一个中间件。
也就是说,实现 DevServer 基本功能的代码大致如下:
See the Pen webpack-dev-middleware by whjin (@whjin) on CodePen.
从以上代码可以看出,从 webpack-dev-middleware
中导出的 webpackMiddleware
是一个函数,该函数需要接收一个 Compiler 实例。Webpack API 导出的 webpack
函数会返回一个Compiler 实例。
webpackMiddleware
函数的返回结果是一个 Expressjs 的中间件,该中间件有以下功能:
通过 webpack-dev-middleware
能够将 DevServer 集成到你现有的 HTTP 服务器中,让你现有的 HTTP 服务器能返回 Webpack 构建出的内容,而不是在开发时启动多个 HTTP 服务器。 这特别适用于后端接口服务采用 Node.js 编写的项目。
在 Node.js 中调用 webpack-dev-middleware 提供的 API 时,还可以给它传入一些配置项,方法如下:
See the Pen Webpack Dev Middleware by whjin (@whjin) on CodePen.
DevServer 提供了一个方便的功能,可以做到在监听到文件发生变化时自动替换网页中的老模块,以做到实时预览。
DevServer 虽然是基于 webpack-dev-middleware
实现的,但 webpack-dev-middleware
并没有实现模块热替换功能,而是 DevServer 自己实现了该功能。
为了在使用 webpack-dev-middleware
时也能使用模块热替换功能去提升开发效率,需要额外的再接入 webpack-hot-middleware。 需要做以下修改才能实现模块热替换。
第1步:修改 webpack.config.js
文件,加入 HotModuleReplacementPlugin
插件,修改如下:
See the Pen HotModuleReplacementPlugin by whjin (@whjin) on CodePen.
第2步:修改 HTTP 服务器代码 server.js
文件,接入 webpack-hot-middleware
中间件,修改如下:
See the Pen server.js by whjin (@whjin) on CodePen.
第3步:修改执行入口文件 main.js
,加入替换逻辑,在文件末尾加入以下代码:
if (module.hot) {
module.hot.accept();
}
第4步:安装新引入的依赖:
npm i -D webpack-dev-middleware webpack-hot-middleware express
安装成功后,通过 node ./server.js
就能启动一个类似于 DevServer 那样支持模块热替换的自定义 HTTP 服务了。
本实例提供项目完整代码