Question

webpack-dev-server 是 webpack 官方提供的一个工具，可以基于当前的 webpack 构建配置快速启动一个静态服务。当 mode 为 development 时，会具备 hot reload 的功能，即当源码文件变化时，会即时更新当前页面，以便你看到最新的效果…

6.1 基础使用

webpack-dev-server 是一个 npm package ，安装后在已经有 webpack 配置文件的项目目录下直接启动就可以

• webpack-dev-server 默认使用 8080 端口

npm install webpack-dev-server -g
webpack-dev-server --mode development

package 中的 scripts 配置：

{
  // ...
  "scripts": {
    "start": "webpack-dev-server --mode development"
  }
}

6.2 配置

在 webpack 的配置中，可以通过 devServer 字段来配置 webpack-dev-server ，如端口设置、启动 gzip 压缩等，这里简单讲解几个常用的配置

• public 字段用于指定静态服务的域名，默认是 http://localhost:8080/ ，当你使用 Nginx 来做反向代理时，应该就需要使用该配置来指定 Nginx 配置使用的服务域名
• port 字段用于指定静态服务的端口，如上，默认是 8080 ，通常情况下都不需要改动
• publicPath 字段用于指定构建好的静态文件在浏览器中用什么路径去访问，默认是 / ，例如，对于一个构建好的文件 bundle.js ，完整的访问路径是 http://localhost:8080/bundle.js ，如果你配置了 publicPath: 'assets/' ，那么上述 bundle.js 的完整访问路径就是 http://localhost:8080/assets/bundle.js 。可以使用整个 URL 来作为 publicPath 的值，如 publicPath: 'http://localhost:8080/assets/' 。如果你使用了 HMR ，那么要设置 publicPath 就必须使用完整的 URL

建议将 devServer.publicPath 和 output.publicPath 的值保持一致

• proxy 用于配置 webpack-dev-server 将特定 URL 的请求代理到另外一台服务器上。当你有单独的后端开发服务器用于请求 API 时，这个配置相当有用。例如

proxy: {
  '/api': {
    target: "http://localhost:3000", // 将 URL 中带有 /api 的请求代理到本地的 3000 端口的服务上
    pathRewrite: { '^/api': '' }, // 把 URL 中 path 部分的 `api` 移除掉
  },
}...

• before 和 after 配置用于在 webpack-dev-server 定义额外的中间件，如

before(app){
  app.get('/some/path', function(req, res) { // 当访问 /some/path 路径时，返回自定义的 json 数据
    res.json({ custom: 'response' })
  })
}...

• before 在 webpack-dev-server 静态资源中间件处理之前，可以用于拦截部分请求返回特定内容，或者实现简单的数据 mock 。
• after 在 webpack-dev-server 静态资源中间件处理之后，比较少用到，可以用于打印日志或者做一些额外处理…