webpack使用教程(四)webpack 热更新这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动

这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

webpack中的文件监听

文件监听是在发现源码发生变化时，自动构建出新的输出文件。

webpack 开启监听模式，有两种方式:

启动webpack命令时，带上 --watch参数

 "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  }

唯一缺陷: 每次需要手动刷新浏览器

在配置webpack.config.js中设置watch:true

文件监听的原理分析

轮询判断文件的最后编程时间是否变化某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等aggregateTimeout

module.export = {
    // 默认false,也就是不开启
    watch: true,
    watchOptions: {
        // 默认为空，不监听的文件或者文件夹，支持正则匹配
        ignored: /node_modules/,
        // 监听到变化发生后会等300ms再去执行，默认300ms
        aggregateTimeout: 300,
        // 判断文件是否发生变化是通过不停询问系统文件有没有变化实现的，默认每秒问1000次
        poll: 1000
    }
}

热更新 webpack-dev-server

WDS 不刷新浏览器 WDS 不输出文件，而是放在内存中使用HotModuleReplacementPlugin插件

cnpm i webpack-dev-server -D

在webpack.config.js中配置服务的参数

 devServer:{ //开发服务器的配置
   port:3000,//端口
   progress:true,//进度条
   contentBase: "./dist", //运行目录
   compress: true, //启用gzip压缩所有服务
 },

在这种情况下，webpack就可以起一个服务但是浏览器是需要html

热更新: 使用webpack-dev-middleware也可以

热更新的原理分析

webpack Compile 将JS 编译成Bundle HMR Server: 将热更新的文件输出给HMR Runtime Bundle server: 提供文件在浏览器的访问 HMR Runtime: 会被注入到浏览器，更新文件的变化 bundle.js 构建输出的文件

配置html打包

yarn add html-webpack-plugin

在src目录下新建一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!-- 模板 -->
    
</body>
</html>

引入html打包插件

plugins:[ //数组放着所有的webpack插件
  new HtmlWebpackPlugin({
    template:'./src/index.html',//模板路径
    filename:"index.html",//模板名称
    minify:{
      removeAttributeQuotes:true,//删除属性的双引号
      collapseWhitespace:true,//打包出一行
    },
    hash: true, // 增加哈希戳，解决缓存问题
  })
]

打包的时候js也可以加哈希，避免缓存

 output:{
     filename:'bundle.[hash:8].js', // 打包后的文件名，hash只有8位
     path: path.resolve(__dirname,'dist'), //路径必须是一个绝对路径
 },