webpack：热加载

[Quickeryi]

webpack热加载方案

在前端自动化过程中，热加载功能是必不可少的，它能极大的提升开发效率，帮助开发人员快速实现所见即所得～ 👍
下面记录以下集中方案，每种方案都有各自的特点，选择适合符合自己业务需求的，才是最好的！

方案一：启动监听模式

webpack自带监听模式watch,这是种模式非常简单易用，只需要在命令行执行webpack时，加上参数即可，如下：

$ webpack --watch

# 如果编译时，希望输出内容带有进度和颜色，可以像下面这样使用
$ webpack --watch --colors --progress

• 特点：
  • 会最终编译文件到指定输出目录，即开发者最终是可以看到编译后的文件的
  • 没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译
• 缺点：
  • 所以当频繁操作多个原文件时，编译速度会很比较慢，开发效率降低
  • 这样的打包的方式不能做到hot replace，即每次webpack编译之后，你还需要手动刷新浏览器

方案二：webpack-dev-server

webpack-dev-server 提供了一个易于部署的开发服务器，具有快速的实时重载（live reloading）功能，总体来说，它完美的解决了第一种方案的两个缺点，使用方式如下：

# 下载安装 webpack-dev-server
$ npm install webpack-dev-server;

# 使用方式一：webpack-dev-server CLI（命令行参数调用）
$ webpack-dev-server --content-base <base path for the content> --open --inline --hot --compress

# 使用方式二：webpack-dev-server 配置（webpack.config.js）
const devServer = require('webpack-dev-server');
module.exports = {
   //....
   devServer: {
       contentBase: <告诉服务器从哪里提供内容>,
       proxy: <对于一些前后端分离开发项目，此处可以代理自己的api服务器>
       //........
   }
};

• 参考：
  • webpack-dev-server CLI参数
  • webpack-dev-server使用方法
  • webpack-dev-server 配置参数
• 特点：
  • webapck-dev-server使用内存编译，这意味着 bundle 不会被保存在硬盘上，即开发者不会看到编译后的文件
• 优点：
  • 由于使用内存编译，所以编译速度快
  • webapck-dev-server使用的http服务器和client使用了websocket通讯协议，所以原始文件改动后会立即进行实时编译
  • webapck-dev-server内置有热加载功能，开启后，文件编译即会刷新整个页面

方案三：Express + webpack-dev-middleware

这是一种进阶方案，其实webapck-dev-server就是基于这种方案的，只不过它已经封装好了，开箱即用，如果你已经有一个 Node.js 服务器或者你想要完全控制服务器，这将很实用，而且自己编写会获得极大的灵活性。这里就不过多解释了。

写在最后

大部分人在看官方文档时，肯定会被webapck-dev-server webpack-dev-middleware webpack-hot-middleware这几个概念弄晕，下面简明扼要的说一下它们分别是啥，并彼此有啥关系吧！

• webapck-dev-server：webpack-dev-server是一个基于Express的http服务器，它的作用主要是使用webpack进行实时的编译，再用webpack-dev-middleware将编译后文件会输出到内存中。
• webpack-dev-middleware：首先，它是一个中间件，使用过Express的人应该会很熟悉middleware这个概念；这个中间件会导致 webpack 在内存中编译文件。当一个编译正在执行的时候，它会将对于文件的请求延迟，直到编译完成，它会在内存中形成一个文件映射系统，每当应用程序请求一个文件，它匹配到了就把内存中缓存的对应结果以文件的格式返回给你，反之则进入到下一个中间件。
• webpack-hot-middleware：首先，它也是一个中间件，它是结合webpack-dev-middleware使用，它可以实现浏览器的实时刷新更新（hot reload）；HMR和热加载的区别是：热加载是刷新整个页面