webpack-dev-server 的原理

简介

再看webpack-dev-server源码之前，先弄明白webpack-dev-server是个什么，做什么东西
我们知道webpack可以打包我们的项目文件，然后部署上线，但是在开发过程中，我们想实时看到代码变更后我们的项目时，我们就会启动一个服务器来监听代码文件的变化，并将新的变更及时的展现在我们的浏览器上，极大地提高了我们的开发效率，这就是webpack-dev-server带给我们的东西

版本

• webpack-dev-server：4.7.4

  📢注意

  为了方便阅读文章里使用的代码都是精简后主要流程的伪代码。

  流程图

  为了便于串联起来理解，整理了一份主要步骤的流程图
  

命令行启动

当我们在命令行敲下npm run strat，一般后面都是运行

“start”:”webpack serve —open”

这里webpack就会基于我们webpack.config.js里的配置创建compiler，然后基于compiler和devServe相关配置生成一个WebpackDevServer实例，该实例会启动一个express服务来帮助我们监听静态资源变化并更新，我们以下面这段代码为例开始我们的源码探索:

"use strict";
const Webpack = require("webpack");
const WebpackDevServer = require("../../../lib/Server");
const webpackConfig = require("./webpack.config");
const compiler = Webpack(webpackConfig);
const devServerOptions = { ...webpackConfig.devServer, open: true };
const server = new WebpackDevServer(devServerOptions, compiler);
const runServer = async () => {
  console.log("Starting server...");
  await server.start();
};
runServer();

因为我们是在研究wepack-dev-server，这里我们主要关注server.start()方法里发生了什么。

start