15.利用webpack搭建server本地服务

1.每次修改了一点点的源代码，都会对原来的代码重新做一次打包，有了最新的一个内容，然后通过liveSever搭建一个本地服务，在我们浏览器里面打开把它运行起来。但是这整个过程经常操作会影响我们的开发效率。

我们现在想一旦修改源代码以后，webpack自动做一个编译，新的代码立马反应到浏览器上面。

为了完成自动编译，webpack提供了几种可选的方式：

1. webpack watch mode;
2. webpack-dev-server(常用)；
3. webpack-dev-middleware;

Webpack watch:

webpack给我们提供了watch模式：

• 在该模式下，webpack依赖图中的所有文件，只要有一个发生了更新，那么代码会被重新编译；
• 我们不需要手动去运行 npm run build 指令了；

如何开启watch呢？两种方式：

1. 方式一：在导出的配置中，添加watch:true;
2. 方式二：在启动webpack的命令中，添加 --watch的标识

 webpack-dev-server

上面的方式可以监听到文件的变化，但是事实上它本身没有自动刷新浏览器的功能的，

• 当然，目前我们可以在Vscode中使用live-server来完成这样的功能。
• 但是，我们希望在不使用live-server的情况下，可以具备live reloading(事实重新加载)的功能

安装webpack-dev-server

npm install webpack-dev-server -D

修改配置文件，告知dev server,从什么位置查找文件：

dev server打包之后的文件放在内存里面，相当于我们通过express服务器去访问打包内存里面的这些静态资源，浏览器去访问的时候也是从内存里面直接去读取我们对应的一个资源，在返回到我们浏览器里面的。

（事实上webpack-dev-server使用了一个库叫做memfs的一个库）