瓶子君-优化webpack开发体验

热更新

方式一

webpack-dev-server + HotModuleReplacementPlugin()

  • WDS不需要刷新浏览器
  • WDS不输出文件，而是放在内存中（WDS没有磁盘的IO）

使用HotModuleReplacementPlugin插件

在script中添加
“dev”: “webpack-dev-server —open”
—open表示，在构建完成之后会自动打开浏览器

操作步骤

  • 由于这个插件是webpack内置的，所以要引入webpack

    1. const webpack = require('webpack')

  • wds主要是在开发环境使用，生产环境一般不使用

将mode改为development

  1. mode: 'developmewnt'

  • 在plugins中添加new webpack.HotModuleReplacementPlugin()

    1. plugins: [
    2. new webpack.HotModuleReplacementPlugin()
    3. ]

  • 配置devServer

    1. devServer: {
    2. contentBase: './dist',
    3. hot: true
    4. }

方式二

webpack-dev-middleware

WDM将webpack输出的结果传输给服务器，适用于灵活的定制场景

需要自己创建一个node server（一般用express或koa）

热更新的原理分析

Webpack Compile: 将JS编译成Bundle
HMR server：将热更新的文件输出给HRM Runtime
Bundle server：提供文件在浏览器的访问
HMR Runtime：会被注入到浏览器，使得bundle.js可以和服务器建立连接（一般为websocket），更新文件的变化
bundle.js：构建输出的文件
image.png
1 启动阶段：1 → 2 → A → B
通过webpack compile进行打包，打包完成之后，将文件传输给bundle server服务器，服务器通过server的方式，让浏览器可以访问到

2
开发阶段，当有文件发生变化，此时文件系统发生变化，经过webpack compile编译，编译完成之后，将代码发送给HRM server，此时就可以知道哪些模块和资源发生了改变，HRM server（服务端）通知HRM runtime（客户端），通常以JSON形式传输，接收到更新之后，HRM runtime会改变代码，无需刷新