Question

webpack-dev-server 是一个使用了 express 的 Http 服务器，它的作用主要是为了监听资源文件的改变，该 http 服务器和 client 使用了 websocket 通信协议，只要资源文件发生改变，webpack-dev-server 就会实时的进行编译。

$ npm show webpack-dev-server

webpack-dev-server@4.6.0 | MIT | deps: 25 | versions: 188
Serves a webpack app. Updates the browser on changes.
https://github.com/webpack/webpack-dev-server#readme

bin: webpack-dev-server

dist
.tarball: https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.6.0.tgz
.shasum: e8648601c440172d9b6f248d28db98bed335315a
.integrity: sha512-oojcBIKvx3Ya7qs1/AVWHDgmP1Xml8rGsEBnSobxU/UJSX1xP1GPM3MwsAnDzvqcVmVki8tV7lbcsjEjk0PtYg==
.unpackedSize: 461.4 kB

dependencies:
ansi-html-community: ^0.0.8          default-gateway: ^6.0.3              ipaddr.js: ^2.0.1                    serve-index: ^1.9.1
bonjour: ^3.5.0                      del: ^6.0.0                          open: ^8.0.9                         sockjs: ^0.3.21
chokidar: ^3.5.2                     express: ^4.17.1                     p-retry: ^4.5.0                      spdy: ^4.0.2
colorette: ^2.0.10                   graceful-fs: ^4.2.6                  portfinder: ^1.0.28                  strip-ansi: ^7.0.0
compression: ^1.7.4                  html-entities: ^2.3.2                schema-utils: ^4.0.0                 url: ^0.11.0
connect-history-api-fallback: ^1.6.0 http-proxy-middleware: ^2.0.0        selfsigned: ^1.10.11                 webpack-dev-middleware: ^5.2.1
(...and 1 more.)

maintainers:
- sokra <tobias.koppers@googlemail.com>
- jhnns <mail@johannesewald.de>
- evilebottnawi <sheo13666q@gmail.com>
- hiroppy <hello@hiroppy.me>

dist-tags:
beta: 3.0.1-beta.0  latest: 4.6.0       next: 4.0.0-rc.1    version-3: 3.11.3   webpack-1: 1.16.5   webpack-3: 2.11.5

published 6 days ago by evilebottnawi <sheo13666q@gmail.com>

webpack-dev-server 为了加快打包进程是将打包后的文件放到内存中的，所以在项目中是看不到它打包以后生成的文件／文件夹的，但仍然需要配置路径：

• output.path 这个参数是配置 打包文件的保存路径的，
• contentBase 在 webpack-dev-server 中的作用就和 output.path 是同等的，如果不配置这个参数，webpack-dev-server 就会将文件（隐藏文件）打包到项目的根路径下。

主要特性

• 热更新 ：webpack-dev-sever 支持两种自动刷新方式 —— Iframe mode、Inline mode

• 热替换(HMR) HMR（Hot Module Replacement）能够实现在页面不刷新的情况下，代码也可以及时的更新到浏览器的页面中，重新执行，避免页面状态丢失。当我们使用 webpack-dev-server 的自动刷新功能时，浏览器会整页刷新。而热替换的区别就在于，当前端代码变动时，无需刷新整个页面，只把变化的部分 替换掉。

• Proxy 代理 ： 最终代理服务器地址在 webpack-proxy.config.js 里配置。

  webpack.config.js （只列出 webpack-dev-server 相关代码）

const getProxyConfig = require('./webpack.proxy-config');    //获取此文件的 module.exports 数据

const APP_DIR = path.resolve(__dirname, './');
const isDevServer = process.argv[1].includes('webpack-dev-server');
const PREAMBLE = [path.join(APP_DIR, '/src/preamble.ts')];
if (isDevMode) {    // 开发模式，即 isDevServer 为 True
  PREAMBLE.unshift(
    `webpack-dev-server/client?http://localhost:${devserverPort}`,
  );

  config.devtool = 'eval-cheap-module-source-map';
  config.devServer = {
    before(app, server, compiler) {
      // load proxy config when manifest updates
      const hook = compiler.hooks.webpackManifestPluginAfterEmit;
      hook.tap('ManifestPlugin', manifest => {
        proxyConfig = getProxyConfig(manifest);  //读入代理配置文件 webpack.proxy-config.js
      });
    },
}

webpack.proxy-config.js

// 下面指定 需要代理的远程服务器地址和端口 supersetUrl
const { supersetPort = 8088, superset: supersetUrl = null } = parsedArgs;
const backend = (supersetUrl || `http://localhost:${supersetPort}`).replace('//+$/','',);   //移除尾部符号/

...
// 模块导出数据
module.exports = newManifest => {
  manifest = newManifest;
  return {
    context: '/',
    target: backend,
    hostRewrite: true,
    changeOrigin: true,
    cookieDomainRewrite: '', // remove cookie domain
    selfHandleResponse: true, // so that the onProxyRes takes care of sending the response
    onProxyRes(proxyResponse, request, response) {
      try {
        copyHeaders(proxyResponse, response);
        if (isHTML(response)) {
          processHTML(proxyResponse, response);
        } else {
          proxyResponse.pipe(response);
        }
        response.flushHeaders();
      } catch (e) {
        response.setHeader('content-type', 'text/plain');
        response.write(`Error requesting ${request.path} from proxy:\n\n`);
        response.end(e.stack);
      }
    },
  };
};