介绍

=======================

1、watch 模式（用得少）

唯一的问题是不会自动刷新页面，需要手动刷新。

方式一：配置

在导出的配置中（一般是项目中 webpack.config.js），module.exports = { } 中添加属性watch: true；

方式二：启动webpack命令

在项目中package.json文件中的scripts属性，添加一个watch脚本，然后运行。这个是通过webpack cli处理的

=======================

2、dev-server（用得多）

和watch相比，文件修改后会自动打包并刷新页面

这个是基于nodeJS的一个框架express搭建的本地服务器，所有文件都是放入内存，这样会更快，少了读取打包文件再放入内存的环节。
正常：构架build，外部运行打包文件，文件放入内存，浏览器运行
dev-serve：打包构建，文件放入内存，浏览器运行

事实上webpack-dev-server使用了一个库叫memfs（意思是memory-file system，内存文件系统，第三方开发的）

安装

npm install webpack-dev-server -D

基本配置，运行

用了这个就没必要用watch模式了，记得把上面watch : true 去掉或者注释掉。

理论上来说，如果你安装了全局的webpack 和 webpack cli，然后通过下面命令就可以直接启动服务器。

webpack serve

为了方便，可以把这个命令放入 package.json 里面，通过npm run serve运行，如下图

然后webpack就会把代码打包编译（没有生成dist文件夹，而是放到内存），然后启动一个服务器，默认的位置和端口是 http://localhost:8080/

访问

打开浏览器，输入网址访问。

其他配置

在这里加一个devServer属性，就可以进行配置

contentbase 静态资源文件夹

如果有的资源没跟着打包，又找不到，就会在这个属性所指向的路径里面找。

假设有一个引入的资源叫abc.js，这个资源没有通过webpack打包，因为入口及入口下的文件没有一个文件对他进行过引入，因此不会跟着打包。

因此运行服务器后，webpack找不到这个文件，只要设置了contentbase 属性对应的文件夹，就会去这个文件夹里面找。

hot 模块热替换（重要）

HMR的全称是Hot Module Replacement，翻译为模块热替换。
应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；

配置打开，重新运行dev server

在项目入口处，指定哪些模块要热替换，如下图的element.js，还可以跟一个回调函数，加入这个模块更新了就执行代码。

热替换原理（重要）

host 主机、port 端口（重要）

简单来说，设置成0.0.0.0，别人和你同一个局域网的，可以通过访问你的ip地址+端口号，来访问你搭建好的本地服务器。相当于你的电脑变成临时的开发服务器给别人访问。
而自己访问的话，windows电脑输入0.0.0.0:7777 可能访问失败的，通过自己ip地址访问就可以了，或者127.0.0.1

compress 压缩JS（重要）

是否为静态文件开启gzip compression。

我们构架好的js代码（如bundle.js等），放到服务器上运行。此时访问服务器，服务器会给我们的浏览器发送js文件，这个文件多大，就发送多大，如下图。

如果开启了gzip压缩，那么服务器给我们发送bundle.js文件是压缩过的，文件大小能少大概60%，浏览器接收后会解压然后运行，相当于牺牲一点cpu运算，能减少服务器传输压力，减少用户等待时间。

开发时自己电脑上可以不开，因为内存传输给浏览器速度极快，感受不出来，开了反而增加cpu算力。

Proxy 代理（重要）

主要是解决跨域问题，可以查看 https://www.yuque.com/yejielin/mypn47/bleits#XPUdo

配置：

假设：
你的电脑ip地址是：192.168.0.100，
前端服务器ip地址是：192.168.0.200，端口号7777
假设现在发送一个请求地址是”http://192.168.0.200:7777/api/getUserName"，

如果没有设置代理，那么正常浏览器会把发送方的源origin，设置为你自己的ip地址192.168.0.100 ，

这样和服务器的ip地址不一致，服务器可以接收并返回数据，浏览器看到你自己的ip地址192.168.0.100 ，服务器返回来的是192.168.0.200，出于安全问题就会报错。

此时要设置proxy代理，让浏览器发送请求时，把发送方（你自己电脑）的源origin，改为192.168.0.200：7777，这样和前端服务器是一样的，浏览器就不会报错。

// webpack.config.js
devServer:{
    proxy:{
    "/api":"http://192.168.0.200:7777/", // 设置proxy代理
    changeOrigin:true // 告诉webpack帮我修改我的源，修改成上面的
  }    
}

如果你的请求是”http://192.168.0.200:7777/getUserName"，没有api，就要通过设置替换掉

然后axios发送请求要改为下面的：

const testFunction = () => {
  axios({
    baseURL:'/api', // 注意，proxy查找的'/api'，是查找baseURL的，并不是查找下面的url。把'/api'替换成target
    url:"/testFun",
    method:"get",
  }).then((res) => {
    console.log(res);
  });
};