使用 Webpack Dev Middleware

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 编写的项目。

Webpack Dev Middleware 支持的配置项

在 Node.js 中调用 webpack-dev-middleware 提供的 API 时,还可以给它传入一些配置项,方法如下:

See the Pen Webpack Dev Middleware by whjin (@whjin) on CodePen.

Webpack Dev Middleware 与模块热替换

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 服务了。

本实例提供项目完整代码