webpack-dev-server【devServer属性配置】
前言：
DevServer 是webpack开发服务器。
webpack-dev-server： 是一个本地开发服务器，会自动监听变化，自动打包构建，自动更新刷新浏览器
特点：
- 不会产生dist文件，将打包结果暂时存在内存中，内部的http-sever访问这些文件并读取数据，发送给浏览器
- 减少磁盘的读取，提高构建效率
写法：在webpack.config.js文件中，通过属性devServer: { } 设置与 webpack-dev-server相关的配置
安装：下载安装webpack-dev-server库
$ npm i -D webapck-dev-server
配置package.json 和 webpack.config.js
当运行 npm run dev 的时候，devServer首先会在内存中创建类似的dist目录，这里不会看到生成的dist打包文件，是因为webpack-dev-server是将打包编译结果放在内存中，内部的http-sever会访问这些文件并读取数据，再发送给浏览器 ，由浏览器打开进行预览。
webpack-dev-server其它配置
mode: 'development',
entry: {},
output: {},
devtool:'#source-map',
module: {rules: []},
devServer: {
contentBase: resolve('./'), // 对外提供的访问内容的路径，只有在提供静态文件访问的情况下才需要使用该配置。
compress: true, // 配置是否启用 gzip 压缩。boolean 为类型，默认为 false。
host: 'localhost' || baseDevServer.host,
inline: true, // 切换dev-server的两种模式，默认情况server使用inline mode(live reload及构建信息的相关代码会被插入到bundle中。)。
// false:切换到iframe mode(使用iframe mode会在通知栏下方显示构建信息)
port: baseDevServer.port || 9000,
quiet: true, // 当启用该配置，除了初始化信息会被写到console中，其他任何信息都不会被写进去。
// errors和warnings也不会被写到console中。
useLocalIp: baseDevServer.useLocalIp || false,
overlay: { // 在编译过程中有任何错误，可以显示在网页上,在浏览器上全屏显示编译的errors或warnings。默认是关闭的
warnings: false,
errors: true
},
headers: { // 向所有的请求添加headers
"X-Custom-Foo": "bar"
},
historyApiFallback: true, // 当使用html5 history api,将会在响应404时返回index.html。
historyApiFallback: {
rewrites: [ // 通过传递一个object来对该共呢个做更多的定
{ from: /^\/$/, to: '/views/landing.html' },
{ from: /^\/subpage/, to: '/views/subpage.html' },
{ from: /./, to: '/views/404.html' }
],
disableDotRule: true // 当在路径中使用.符号，需要使用disableDotRule配置。
},
https: true, // 默认情况下dev-server使用http协议，通过配置可以支持https
https: {
key: fs.readFileSync("/path/to/server.key"),
cert: fs.readFileSync("/path/to/server.crt"),
ca: fs.readFileSync("/path/to/ca.pem"),
},
open: false, // 第一次构建是否自动用浏览器打开网页，默认是true
openPage: '/different/page', // 配置项用于打开指定 URL 的网页
hot: true, // 开启热更新HMR，只能跟新css。js和图片需要手动更新
hotOnly:true, 启用HMR，当编译失败时，不刷新页面。
proxy: {
'/api': {
target: 'https://api.github.com', // 代理地址
pathRewrite: {
'^/api': ''
},
// 默认代理服务器，会以我们实际在浏览器请求的主机名【localhost:8080】，作为代理服务器的主机名，
// 然后代理服务器会带上这个主机名，去请求github，然而 github是不认识 【localhost:8080】
// changeOrigin: true 就是以实际代理请求发生过程中的主机名去请求，如：代理服务器的主机名
changeOrigin: true
}
}
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('./')
}
},
plugins: [
new webpack.HotModuleReplacementPlugin() // HMR 特性所需要的插件
]1: 打开指定 URL 网页：
devServer设置：openPage: '/different/page' 也可以配置package.json:达到一样的效果
2: 开启热跟新HMR【适用于开发模式，不适用生产模式】
devServer设置：hot: true 也可以配置package.json:达到一样的效果
我的IP地址是：10.10.42.3。那么像上图这样配置后，
局域网内其它机器需要访问：10.10.42.3:8080 。
本机访问：10.10.42.3:8080 或者 localhost:8080 或者 127.0.0.1:8080
HMR：
现象：就是你修改代码保存之后，浏览器不会刷新，只会修改你更改过的依赖代码。
好处： 提升开发效率，即你不用手动刷新浏览器，就可以保持浏览器状态
内容拓展： 我们使用webpack-dev-server开启一个开发服务，webpack内部实现watch，当文件发生修改，就重新 ”打包““编译” 保存在内存中，webpack-dev-server依赖中间件webpack-dev-middleware来与webpack进行交互，如果文件变化了，没有配置热更新，webpack-dev-server就会通知浏览器进行刷新。启动开发服务后，浏览器和服务端是通过websocket来进行长链接的，可以自己在network里面看【服务端返回hash，热更新通过hash来判断，“配置了热跟新” 先执行”热跟新“，如果失败执行“刷新”，如果配置了hotOnly：即使 “热更新” 失败，也不刷新】
简单概括：大概流程是我们用webpack-dev-server启动一个服务之后，浏览器和服务端是通过websocket进行长连接，webpack内部实现的watch就会监听文件修改，只要有修改就webpack会重新打包编译到内存中，然后webpack-dev-server依赖中间件webpack-dev-middleware和webpack之间进行交互，每次热更新都会请求一个携带hash值的json文件和一个js，websocker传递的也是hash值，内部机制通过hash值检查进行热更新
3: 代理 proxy： 当您有一个单独的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url
proxy: {
'/proxy': {
target: 'http://your_api_server.com',
changeOrigin: true,
pathRewrite: {
'^/proxy': ''
}
}
- 假设你主机名为 localhost:8080 , 请求 API 的 url 是 http：//your_api_server.com/user/list
- '/proxy'：如果点击某个按钮，触发请求 API 事件，这时请求 url 是http：//localhost:8080/proxy/user/list 。
- changeOrigin：如果 true ，那么 http：//localhost:8080/proxy/user/list 变为 http：//your_api_server.com/proxy/user/list 。但还不是我们要的 url 。
- pathRewrite：重写路径。匹配 /proxy ，然后变为'' ，那么 url 最终为 http：//your_api_server.com/user/list 。
4: 配置是否启用 gzip 压缩。
devServer设置：compress: true 也可以配置package.json:达到一样的效果
5: 通过参数让编译的输出内容带有进度和颜色： webpack --progress --colors；
webpack-cli 命令的选项比较多，详细可以通过 webpack-cli 的文档进行查阅，这里总结我们日常用的最多的几个选项（options）：
- –config：指定一个 Webpack 配置文件的路径；
- –mode：指定打包环境的mode，取值为development和production，分别对应着开发环境和生产环境；
- –json：输mode出 Webpack 打包的结果，可以使用webpack --json > stats.json方式将打包结果输出到指定的文件；
- –progress：显示 Webpack 打包进度；
- –watch, -w：watch 模式打包，监控文件变化之后重新开始打包；
- –color, --colors/–no-color, --no-colors：控制台输出的内容是否开启颜色；
- –hot：开启 Hot Module Replacement模式，后面会详细介绍；
- –profile：会详细的输出每个环节的用时（时间），方便排查打包速度瓶颈。