《九》Webpack 中的 watch 模式、DevServer 和 HMR 模块热替换

目前，每次修改源代码之后，都需要手动运行 webpack 命令重新进行编译打包，并且手动刷新浏览器，才能看到最新的效果。Webpack 中有三种方案来解决这个问题。

watch 模式：

Webapck 提供了 watch 模式。在该模式下，Webapck 会监听依赖图中所有文件的源代码，一旦发现源代码发生变化，Webapck 就会自动重新进行编译打包。但是，仍需要手动刷新浏览器，才能看到最新的效果。

开启 watch 模式有两种方式：

1. 在 webpack.config.js 配置文件中，添加 watch:true。

   module.exports = {
     watch: true
   }
   

2. 在启动 Webpack 的脚本命令中，添加 --watch 参数。
   

DevServer：

DevServer 会启动一个本地的服务器；并且会监听源代码的变化并自动重新进行编译打包，不再需要每次修改原代码之后都手动运行命名进行编译打包了；而且会自动刷新浏览器，不再需要手动刷新浏览器了。

1. 安装 webpack-dev-server：npm install webpack-dev-server --save-dev。

2. 运行 webpack serve 命令将会开启 webpack-dev-server 服务。当监听到源代码发生变化，将会自动重新进行编译打包，并自动刷新浏览器。

   webpack-dev-server 是通过 express 开启一个本地服务的，默认使用 Live Reloading实时重载。

   Webpack5 之前的命令是 webpack-dev-server；但是 Webpack5 之后的命令是 webpack serve，webpack-cli 检测到有 serve 这个参数，将会自动启动 webpack-dev-server 的服务。

   

配置 DevServer：

可以在 Webpack 配置文件中配置 DevServer。

module.exports = {
  devServer: {
  	host: 0000, // 主机，默认是 localhost。
    port: 8888, // 端口号，默认是 8080
    open: true， // 是否自动打开浏览器，默认是 false
    compress: true, // 是否对打包的文件进行 gzip 压缩
  }
}

HMR：

HMR：Hot Module Replacement，模块热替换。是指在应用程序运行过程中，添加、删除或替换模块时，只更新需要变化的内容，而不会重新加载整个页面，这样可以保留应用程序的状态不丢失。

在普通项目中使用 HMR：

1. 新建 src/index.js 和 src/js/utils.js，并编写代码。

   // src/index.js
   import './js/utils'
   
   console.log('index.js')
   

   // src/js/utils.js
   console.log(1)
   

2. 安装 we