webpack基础(六)——搭建本地服务器

一、为什么需要搭建本地服务
因为每一次执行的过程中，都需要先执行npm run build执行代码，然后再启动服务器来开启服务。但是每一次修改文件的时候，都需要重新执行命令，导致运行效率不高。
我们可以更改package.json中的代码，将"build": "webpack "改为"build":"webpack --watch"。或者可以直接在webpack.config.js中设置watch:true。
二、使用webpack-dev-server
上面我们使用watch来对代码进行监听，不能实现浏览器自动刷新的功能。所以此时我们使用webpack-deb-server其在本地开启一个服务器，并且可以检测代码是否改变来进行打包。

使用方法：
(1):安装
npm install webpack-dev-server
(2):在wbepack.config.js中进行配置
devServer:{
	contentBase:"/build"  //设置开启服务的目录
}
(3):在webpack.config.js中设置target:true,表示设置运行在浏览器环境中。
(4):在package.json中进行配置。
"serve":"webpack serve --config webpack.config.js"
(5):运行npm run build

如上图所示，我们在控制台运行npm run serve时，并没有生成build文件夹，原因是:webpack-dev-server在内部利用一个memsf这样一包，将打包后的文件放入内存中，并没有重写，这样在更改源文件的效率更高。
三、HMR
HMR叫做模块热更新，就是当某一个模块的代码发生改变，在浏览器上只会重新执行修改后的代码，并不会全部的代码都执行。在webpack-dev-server中，默认是支持热更新的，如果需要开启热更新则只需要设置hot:true即可。如果不开启则默认是live reloading。

使用规则，
  devServer:{
    contentBase:"./build", 
    hot:true,
  }, 
因为是模块热更新，所以最小单位是模块，也就是一个文件，下面是文件的代码：
import "./test.js"
if (module.hot) {
  module.hot.accept("./test.js", () => {
    console.log("执行test.js")
  })
}

三、框架的HMR
我们在使用框架开发的时候，不能使用module.hot.accpet()函数来对每一个文件实现热更新。在每一个框架中，其实都是内置热更新函数的，即使没有在社区中也是存在的。
四、热更新原理
热更新依赖的是webpack-dev-server，所以在使用热更新是，webpack-dev-server不仅会创建express服务器，将打包的资源返回给浏览器。也会产生另一个服务器socket服务器，其中socket服务器是一个长链接，当服务器检测到被检测的代码存在变化时，会返回两个文件,一个是.json文件，另一个是.js文件，将这两个文件返回给浏览器，浏览器拿到这两个文件，然后通过HMR runtime机制，对修改的文件进行修改。

五、服务器的其他配置

1、host:主机地址
2、port:端口号
3、open:是否打开浏览器
4、compress:是否为静态GZP压缩。
5、proxy代理

六、resolve