webpack之文件监听和热更新

一、文件监听

1、文件监听是在发现源代码发生改变时，自动重新构建出新的输出文件

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

• 启动 webpack 命令时，带上 --watch 参数
• 在配置 webpack.config.js 中设置 watch: true

3、构建完成后，输出的文件放入磁盘中

4、实践

package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    + "watch": "webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

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

二、文件监听原理分析

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

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

三、热更新

1、使用 webpack-dev-server

• 自动编译并运行，不需要手动刷新浏览器，每次修改代码都需要重新执行 webpack 命令，可以使用 webpack-dev-server 自动打包运行
• 不输出文件，而是放在内存中
• 与 HotModuleReplacementPlugin 插件配合使用

npm i webpack-dev-server@3 -D

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    + mode: 'development',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                // use: 'file-loader'
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 小于 10k 的图片在打包时，webpack 会对它做自动的 base64
                            limit: 10240
                        }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: 'file-loader'
            }
        ]
    },
    + plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    + devServer: {
        contentBase: './dist',  // 设置基本目录结构
        hot: true
    }
}

package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch",
    + "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2、使用 webpack-dev-middleware

• 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('app listen on port 3000');
});

四、热更新原理分析

概念	描述
Webpack Compiler	将 JS 编译成 Bundle
HMR Server	将热更新的文件传输给 HMR Runtime
Bundle Server	提供文件在浏览器的访问
HMR Runtime	会被注入到浏览器，更新文件的变化
bundle.js	构建输出的文件