细说webpack 7. webpack dev server 的使用

你们好！我是萝卜，今天跟你们分享官方提供开发工具 webpack dev server 的使用。

webpack-dev-server是一个基于 Express 的本地开发服务器。它使用 webpack-dev-middleware 中间件来为经过 Webpack 打包生成的资源文件提供 Web 服务。它还有一个经过 Socket IO 链接着 webpack-dev-server 服务器的小型运行时程序。webpack-dev-server 发送关于编译状态的消息到客户端，客户端根据消息做出响应。

Tips：简单来讲 webpack-dev-server 就是一个 Express 的小型服务器，它是经过 Express 的中间件 webpack-dev-middleware 和 Webpack 进行交互的。因此咱们若是本身的项目自己就是个 Express 服务器，那么可使用 webpack-dev-middleware 和 webpack-hot-middleware 两个中间件来实现 HMR 功能。

命令行

webpack-dev-server 安装以后，会提供一个 bin 命令行，经过命令行能够启动对应的服务。

// 项目中安装 webpack-dev-server
npm i webpack-dev-server -D
// 使用 npx 启动
npx webpack-dev-server复制代码

执行 webpack-dev-server 命令以后，它会读取 Webpack 的配置文件（默认是 webpack.config.js）而后将文件打包到内存中（因此看不到 dist 文件夹的生产，Webpack 会打包到硬盘上），这时候打开 server 的默认地址：localhost:8080 就能够看到文件目录或者页面（默认是显示 index.html，没有则显示目录）。

跟 webpack-cli 同样，webpack-dev-server 也有一些选项能够添加：

// 修改端口号和 host
npx webpack-dev-server --port 3000 --host 127.0.0.1
// 启动inline 模式的自动刷新
npx webpack-dev-server --hot --inline
// 手动指定 webpack config 文件
npx webpack-dev-server --config webpack-xxx.js
// 指定 webpack 的 mode
npx webpack-dev-server --mode development
// watch 功能，文件发生变化则触发从新编译
npx webpack-dev-server --watch
// dev-server默认会将工做目录（当前目录）最为基本目录，能够手动修改它
npx webpack-dev-server --content-base ./build复制代码

上面只介绍了经常使用的而且比较重要的一些命令行选项，要查看所有，可使用webpack-dev-server -h 查看帮助。

咱们还能够将 webpack-dev-server 放到 package.json 的 scripts 里面，例以下面例子，执行 npm run dev 实际就是执行的对应 webpack-dev-server 命令：

{
  ‘script’: {
    ‘dev’: ‘webpack-dev-server --mode development --config webpack.config.dev.js --hot --inline --port 3000’
  }
} 复制代码

自动刷新

在开发中，咱们但愿边写代码，边看到代码的执行状况，webpack-dev-server 提供自动刷新页面的功能能够知足咱们的需求。webpack-dev-server 支持两种模式的自动刷新页面。

• iframe 模式：页面被放到一个 iframe 内，当发生变化时，会从新加载；
• inline 模式：将 webpack-dev-server 的重载代码添加到产出的 bundle 中。

两种模式都支持模块热替换（Hot Module Replacement）。模块热替换的好处是只替换更新的部分，而不是整个页面都从新加载。

使用方式：webpack-dev-server --hot --inline 是开启 inline 模式的自动刷新。

和 Webpack 配置结合

webpack-dev-server 被 Webpack 做为内置插件对外提供了，这样能够直接在对应的 Webpack 配置文件中经过 devServer 这个属性的配置来配置本身的webpack-dev-server。

const path = require(path);
module.exports = {
  // ...
  devServer: {
    contentBase: path.join(__dirname, ‘dist’),
    port: 3000
  }
}复制代码

其中 devServer.port 表示服务器的监听端口，即运行后咱们能够经过 http://localhost:3000 来访问应用；而 devServer.contentBase 表示服务器将从哪一个目录去查找内容文件（即页面文件，好比 HTML）。

配置完以后，在项目中执行 webpack-dev-server 咱们能够用http://localhost:3000/这个地址来访问本地开发服务了。

Tips： 1.启动 devserver 是经过 webpack-dev-server 命令行来启动的，不是 webpack 命令，执行 webpack 时 devServer 内容会被忽略。 2.在使用数组导出配置的方式时，只会使用第一个配置中的 devServer 选项，并将其用于数组中的其余全部配置。

Hot Module Replacement

HMR 即模块热替换（Hot Module Replacement）的简称，它能够在应用运行的时候，不须要刷新页面，就能够直接替换、增删模块。

Webpack 能够经过配置 webpack.HotModuleReplacementPlugin 插件来开启全局的 HMR 能力，开启后 bundle 文件会变大一些，由于它加入了一个小型的 HMR 运行时（runtime），当你的应用在运行的时候，Webpack 监听到文件变动并从新打包模块时，HMR 会判断这些模块是否接受 update，若容许，则发信号通知应用进行热替换。

要开启 HMR 功能，须要三步：

1.设置 devServer.hot=true，devServer.inline=true（默认）；

• devServer.hot=true：会给 entry 添加 webpack/hot/dev-serve或者webpack/hot/only-dev-serve（devServer.hotOnly=true），这个是实现 HMR 的服务端代码；
• devServer.inline=true：会给 entry 添加webpack-dev-server/client，这是通讯客户端；

2.在 webpack.config.js 中添加 plugins：new webpack.HotModuleReplacementPlugin()；

3.修改入口文件添加 HMR 支持代码：

// 在入口文件 index.js 最后添加以下代码
if(module.hot){
// 通知 webpack 该模块接受 hmr
module.hot.accept(err => {
    if(err) {
      console.log(err);
    }
  });
} 复制代码

通过上面配置以后，再次执行 webpack-dev-server，打开http://localhost:3000，而后修改 index.js 内容，就能看到效果了。

Tips：使用 webpack-dev-server 的 CLI 功能只须要命令行中添加--hot，webpack-dev-server 会自动将webpack.HotModuleReplacementPlugin 这个插件添加到 Webpack 的配置中去，因此开启 HotModuleReplacementPlugin 最简单的方式就是使用 inline 模式（命令行添加 --inline）。

Webpack Dev Server 经常使用配置

• devServer.historyApiFallback：配置若是找不到页面就默认显示的页面；
• devServer.compress：启用 gzip 压缩；
• devServer.hotOnly：构建失败的时候是否不容许回退到使用刷新网页；
• devServer.inline：模式切换，默认为内联模式，使用false切换到 iframe 模式；
• devServer.open：启动后，是否自动使用浏览器打开首页；
• devServer.openPage：启动后，自动使用浏览器打开设置的页面；
• devServer.overlay：是否容许使用全屏覆盖的方式显示编译错误，默认不容许；
• devServer.port：监听端口号，默认 8080；
• devServer.host：指定 host，使用0.0.0.0可让局域网内可访问；
• devServer.contentBase：告诉服务器从哪里提供内容，只有在你想要提供静态文件时才须要；
• devServer.publicPath：设置内存中的打包文件的虚拟路径映射，区别于 output.publicPath；
• devServer.https：https 须要的证书签名等配置。

小结

Webpack 的 webpack-dev-server 是 Webpack 生态链上很重要的一环，在咱们平常的开发环境，咱们可使用 webpack-dev-server 启动本地服务器，并且可以实现 API 接口代理、静态资源服务器、HMR，甚至还可以经过编写 Express 中间件的方式来扩展功能。

可是 webpack-dev-server 自己也有它的局限性，好比咱们项目自己就有一个 Node.js 的业务服务，那么在使用 webpack-dev-server 来模拟接口数据就显得画蛇添足了。