—watch 需要手动刷新浏览器

  1. 开启 —watch 参数

image.png

  1. 或者在 webpack.config.js 中去设置

    1. module.exports = {
    2. watch:true,  // 监听开启
    3. watchOptions:{
    4.  ignored:/node_modules/,  // 忽略监听的文件夹
    5.  aggregateTimeout:300,  // 文件改动后等300ms 执行。
    6.  poll:300 // 每次轮询文件变化的时长 
    7. },
    8. }

    热更新机制 — 浏览器自动刷新

  2. 安装 webpack-dev-server

    1. yarn add webpack-dev-server -D

  3. package.json 中添加 script 命令

image.png

  1. 在webpack.config.json 中进行配置
    1. plugins: [
    2.  new webpack.HotModuleReplacementPlugin(), 
    3.  new HtmlWebpackPlugin({
    4.    title: "hello webpack",
    5.    filename: "main.html",
    6.  }),
    7. ],
    8.   devServer:{
    9. contentBase:'./dist',
    10. hot:true
    11. }

    使用 webpack-dev-middleware

将webpack 输出的文件传输给服务器。

原理分析

  • webpack compile： 将Js编译成 Bundle
  • HMR Server：将热更新的文件输出给HMR Runtime
  • Bundle Server：提供文件在浏览器的访问 （启动一个本地服务器）
  • HMR runtime：会被注入到浏览器，更新文件的变化。
  • bundle.js 构建输入的文件