首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Webpack中的文件监听与热更新

Webpack中的文件监听与热更新

作者头像
越陌度阡
发布2023-01-03 08:45:01
1.2K0
发布2023-01-03 08:45:01
举报

1. 文件监听

⽂件监听是在发现源码发⽣变化时,⾃动重新构建出新的输出⽂件。

webpack 开启监听模式,有两种⽅式:

1. 启动 webpack 命令时,带上 --watch 参数;

在package.json中添加watch执行命令。

{
    "name": "my-project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config webpack.prod.js",
        
        "watch": "webpack --watch"
        
    }
}

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

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

轮询判断⽂件的最后编辑时间是否变化,某个⽂件发⽣了变化,并不会⽴刻告诉监听者,⽽是先缓存起来,等待设置的缓存等待时间过后再去执行。

上面两种方式的缺点是每次需要⼿动刷新浏览器,为了方便开发,我们需要用到热更新。

2. 使用WDS热更新

利用webpack-dev-server结合HotModuleReplacementPlugin插件可以不刷新浏览器实现热更新,它在更新时不输出磁盘,而是将更新的存在内存里面。

1. 在package.json中添加dev命令

webpack-dev-server =>开启服务;

--config webpack.dev.js => 开发模式下,执行webpack.dev.js;

--open => 构建完成后,自动的开启浏览器。

{
    "name": "my-project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack --config webpack.prod.js",
      "watch": "webpack --watch",
      "dev": "webpack-dev-server --config webpack.dev.js --open"
    }
}

2. 配置webpack

'use strict';

const path = require('path');
const webpack = require('webpack');
// 引入自带的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    // 设置为开发模式
    mode: 'development',
    plugins: [
        // 配置插件
        new webpack.HotModuleReplacementPlugin(),
    ],
    devServer: {
        // 服务的目录
        contentBase: './dist',
        // 开启热更新
        hot: true
    }
};

3. 使用WDM热更新

WDM 将 webpack 输出的⽂件传输给服务器,适⽤于灵活的定制场景。

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath
}));
app.listen(3000, function () {
    console.log('Example app listening on port 3000!\n');
});

4. 热更新原理分析

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-01-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 文件监听
  • 2. 使用WDS热更新
  • 3. 使用WDM热更新
  • 4. 热更新原理分析
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档