Webpack之devServer,HMR,Proxys的使用本篇文章讲述的是devserver和hmr和proxy还有

2.8搭建服务

2.8.1那么我们要想为什么要搭建本地服务器呢?

可以提高开发效率,当文件发生变化时,可以自动的完成编译和展示
自动编译，webpack提供了以下几种方式
- webpack watch mode;
- webpack-dev-server(常用);
- Web pack-dev-middleware(不常用)
webpack给我们提供了watch模式:
- 在该模式下，webpack依赖图中的所有文件，只要有文件发生了更新,代码会被重新编译.
- 我们不需要手动去运行 npm run build指令了

2.8.2:搭建方式

开启watch模式两种方式

方式一:在导出的配置中，添加 watch: true;

//package.json
{
  "scripts": {
    "build":"webpack --watch" //通过webpack-cli来进行检查
  },
}

//webpack.config.js
module.export = {
  watch:true
}

方式二:在启动webpack的命令中，添加 --watch的标识;
不会进行源代码打包生成目标代码
但是会把打包后的源代码存放在内存中然后express去读取内存在的代码

事实上webpack-dev-server使用了一个库叫memfs(memory-fs webpack自己写的)

npm install webpack-dev-server -D

//package.json
{
  "scripts": {
    "build":"webpack --watch" //通过webpack-cli来进行检查
    "serve":"webpack serve"//通过webpack-cli来进行检查帮助解析启动本地服务
  },
}

2.8.3:关于devserver的配置

1.设置devserver指定文件位置

//webpack.config.js
module.exports = {
  devserver: {
    contentBase:"./abc" //会去文件中查找对应的资源,只要指定谁就去找谁,一般都是区配置./public
  }
}

2.在index.html中指定一个script标签

 <!-- index.html  -->
<script src="./abc.js"></script>

3.创建文件夹abc/abc.js文件

//abc.js
 console.log("abc")

2.8.4热更新(hot module replacement)

module.exports = {
  target:"web",//为什么打包的 为web打包
  devServer: {
    contentBase:"./public",
    hot:true
  }
}

以上代码还没有达到热更新所以要进行接下来的一些操作

//main.js
import { createApp } from 'vue';
import axios from 'axios';

import App from '@/vue/App';

import "./js/element";

if (module.hot) {
  module.hot.accept("./js/element.js", () => {
    console.log("element模块发生更新了");
  })
}

console.log(sum(20, 30));
console.log(priceFormat());

const app = createApp(App);
app.mount("#app");

注意 vue-loader已经支持vue的HMR，提供开箱即用无需以上这样的配置

2.8.5:HMR原理

2.8.6:hotOnly,host配置

host设置主机地址:
- 默认值是localhost;
- 如果希望其他地方也可以访问，可以设置为 0.0.0.0;
localhost 和 0.0.0.0 的区别:
- localhost:本质上是一个域名，通常情况下会被解析成127.0.0.1;
- 127.0.0.1:回环地址(Loop Back Address)，表达的意思其实是我们主机自己发出去的包，直接被自己接收;
正常的数据库包经常应用层 - 传输层 - 网络层 - 数据链路层 - 物理层 ;

而回环地址，是在网络层直接就被获取到了，是不会经常数据链路层和物理层的;

比如我们监听 127.0.0.1时，在同一个网段下的主机中，通过ip地址是不能访问的;
0.0.0.0:监听IPV4上所有的地址，再根据端口找到不同的应用程序;

比如我们监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的;

//webpack.config.js
devServer: {
  host:"0.0.0.0", //主机地址
  port:8000// 端口号
  open:true //自动打开浏览器
  compress:true //gizp压缩 -> 压缩可以更快传输到浏览器，浏览器会查看是不是gzip会进行解压，html不进行压缩
}

2.8.7:代理

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

hy/moment;
pathRewrite:默认情况下，我们的 /api-hy 也会被写入到URL中，如果希望删除，可以使用pathRewrite;
secure:默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false;
changeOrigin:它表示是否更新代理后请求的headers中host地址;

//webpack.config.js
devserver : {
  "/api": {
    target:"http://localhost:8000",
    pathRewrite: {
      "^/api":""
    },
    secure:false,
    changeOrigin:true
  }
}

2.9resolve模块解析

如果文件具有扩展名，则直接打包文件;
否则，将使用 resolve.extensions选项作为文件扩展名解析;
会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找;
esolve.mainFiles的默认值是 ['index'];
再根据 resolve.extensions来解析扩展名;
默认值是 ['.wasm', '.mjs', '.js', '.json'];
所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时，我们必须自己写上扩展名;
项目的目录结构比较深的时候，或者一个文件的路径可能需要 ../../../这种路径片段;
我们可以给某些常见的路径起一个别名;

//webpack.config.js
module.exports = {
  resolve: {
    extensions:[".js","json",".mjs",".vue"],
    alias: {
      "@":patj.resolve(__dirname,"./src")
      "js":path.resolve(__dirname,"./src/js")
    }
  }
}