Webpack5 - 开发服务器 webpack-dev-server

一. Webpack5 - 开发服务器的作用

webpack-dev-server 可以提供用于开发的 HTTP Server（开发服务器），它已集成了自动编译和自动刷新页面的功能。

二. Webpack5 - 开发服务器安装和使用

1. 安装

cnpm install webpack-dev-server --save-dev

2. 启动

yarn webpack serve

看命令输出，访问 http://localhost:8080/ 即是开发中的页面。

尝试修改样式文件-可发现页面会自动刷新更新；

尝试修改js脚本文件-可发现页面会自动刷新更新；

尝试修改index.html模板文件-可发现页面会自动刷新更新（发现如果开启 devServer.hot 为true，则模板文件更新后不会自动刷新，需手动刷新...）。

3. 说明

webpack-dev-server 自动编译项目，并把编译结果放入缓存中，并不输出到输出目录。

文件修改后，页面会刷新，则会丢失可能的调试状态，但是由于逻辑多种多样，webpack 无法处理，所以只好刷新页面。后续可以手动实现webpack的模块热替换（HMR Hot Module Replacement）来自定义模块的更新逻辑。

三. 开发服务器配置

1. 设置不必参与打包的静态资源访问路径

webpack.config.js:

module.exports = {
  // 设置开发服务器
  devServer: {
    // 开发时可直接访问到 ./public 下的静态资源，这些资源在开发中不必打包
    contentBase: './public',
  }
}

2. 设置代理API服务

webpack.config.js:

module.exports = {
  // 设置开发服务器
  devServer: {
    // 配置 API访问代理
    // http://localhost:8080/api/users/octocat/orgs
    proxy: {
      '/api': {
          // http://localhost:8080/api/users ->             
          // https://api.github.com/api/users
        target: 'https://api.github.com',

          // http://localhost:8080/api/users -> 
          // https://api.githu.com/users
        pathRewrite: {
          '^/api': '' // 替换 /api 开头 为 ''
        },

        // 不能使用 localhost:8080 作为请求 Github 的主机名
        changeOrigin: true,
      }
    },
  }
}

3. 开启 HMR （Hot Module Replacement）

模块热更新（替换），是指在应用的运行过程中实时替换某个模块资源，而运行不用终止。

开启 webpack HMR，webpack.config.js:

const webpack = require('webpack')
module.exports = {
    devServer: {
        hot: true, // 开启webpack HRM(模块热替换)
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
    ]
}

开启后，可发现：

修改样式文件-页面会自动加载新样式而不刷新页面（因为 style-loader 对样式模块热更新逻辑做了处理）；而

而修改脚本文件-页面仍然会自动刷新以更新（而脚本文件复杂多样，webpack不知如何处理）。

4. 手写逻辑处理脚本模块的 HMR 逻辑

可在入口js文件中，处理引入模块的更新逻辑，如：

index.js :

// 应用入口文件
import './index.css';
import add from './tool.js';
import background from './img.jpeg';

console.log(add(6, 6));

var imgEle = new Image()
imgEle.src = background;
document.body.append(imgEle);


/* 使用 webpack HMR 的 API 来处理模块更新逻辑 避免页面刷新
module.hot.accept 可注册一个模块（路径）的更新逻辑 */ 
if(module.hot) { // 如果开启了webpack模块热更新
  // 处理 tool.js 模块的热更新
  module.hot.accept('./tool.js', () => {
    console.log('tool 模块更新啦...')
    console.log(add(6, 6));
  })

  // 处理 img.jpeg 图片文件 的热更新
  module.hot.accept('./src/img.jpeg', () => {
    imgEle.src = background;
  })
}

5. 注意事项 - 手写逻辑处理脚本模块的 HMR 逻辑

a. 处理 HMR 的代码报错会导致自动刷新,解决方式是用 hotOnly 替换 hot：

devServer: {
  hotOnly: true,
},

b. 应判断 module.hot 是否存在

c. 打包后的代码不会包含 对 HMR 模块替换逻辑的代码

本文 完。