1.模块自动化编译

目前我们开发的代码，为了运行需要有俩个操作： 1.npm run build ,编译相关代码 2.live server打开html 为了完成自动化编译，webpack提供了几种可选的方式：
1.webpack watch mode;
2.webpack-dev-server(常用);
3.webpack-dev-middleware;

1.webpack watch模式

在webpack的watch模式之下，webpack依赖图中的所有文件，只要有一个发生了更新，那么代码将会被重新编译；无需重新执行npm run build命令。
开启watch的两种方式：
1.在导出的配置中，添加watch : true
2.在启动webpack的命令中，添加--watch标识

"script":{
    "build":"webpack --watch "
}

2.webpack-dev-server

可以在不借助live-server插件的情况下，实现实时重新加载功能

安装webpack-dev-server

npm install webpack-dev-server -D

配置脚本

"script":{
    "build":"webpack --watch ",
    "serve":"webpack serve"
}

执行 npm run serve 后，webpack会开启一个express服务，将代码编译打包后放入内存中，然后浏览器会向此服务器请求资源。
对于打包资源外的文件夹，比如public中的资源，我们可以对dev-server进行配置，通过contentBase完成对打包外资源的访问

dev-server:{
    contentBase:"./public"
}

因此开发阶段，可以使用contentBase，生产阶段可以使用copyWebpackPulgin；

2.模块热替换HMR

1.HMR配置实现

HMR：指在应用程序的运行过程中，替换、添加、删除模块，而无需刷新整个页面；
1.不重新加载整个页面，可以保留某些应用程序的状态不丢失
2.

dev-server:{
    hot:true
}

main.js

import "./js/element"

if(module.hot){
    module.hot.accept("./js/element",()=>{
        console.log("element 文件发生了热替换")
    })
}

此时，我们修改element文件里的代码时，不会重新加载整个页面，而是进行模块热替换；
当然，在真实开发中，我们无需进行如此复杂的配置，对于框架的热替换配置，社区已经有了成熟的解决方案；
比如在vue开发中，我们使用vue-loader; 在react开发中，我们有React Hot Loader

2.HMR原理

HMR是如何实现模块热替换的呢？事实上webpack启动项目后，会启动两个服务，一个静态资源服务(express服务，打包后的资源直接被浏览器请求和解析)，一个ws的长连接服务(socket服务)；

HMR Socket Server，是一个socket的长连接：

长连接有一个最好的好处是建立连接后双方可以通信（服务器可以直接发送文件到客户端）；

当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk）；

通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）；

浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新；

3.dev-server 其他配置

host设置主机地址： 默认值是localhost；

如果希望其他地方也可以访问，可以设置为0.0.0.0；

port设置监听的端口: 默认情况下是8080

open是否打开浏览器： 默认为false，设为true时，自动打开浏览器

compress是否为静态文件开启gzip： 默认为false，设为true后开启gzip压缩，将静态资源进行压缩，response-header中的content-encodeing为gzip

proxy设置代理解决跨域 可以进行如下配置：

target：表示的是代理到的目标地址，比如/api/moment会被代理到http://localhost:8888/api/moment

pathRewrite：默认情况下，我们的/api也会被写入到URL中，如果希望删除，可以使用pathRewrite；

secure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false；

changeOrigin：修改源，它表示是否更新代理后请求的headers中host地址；

Vue学习笔记：5.webpack进阶知识