三个要点

构建的核心流程
loader的作用
plugin架构与常用套路

核心流程

初始化阶段
- 初始化参数
- 创建编译器对象
- 初始化编译环境
- 开始编译
- 确定入口
构建阶段
- 编译模块：根据entry对应的dependence创建module对象，调用loader将模块转译为标准JS内容，调用JS解释器内容转换为AST对象，从中找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
- 完成模块编译
生成阶段
- 输出资源
- 写入文件系统

名词解释

Entry：编译入口、起点
Compiler：编译管理器，webpack启动后会创建complier对象，该对象一直存活直到退出
Compilation：单次编辑过程的管理器，整个过程中只有一个complier对象，但是每次变更后触发的重新编译，都会创建一个新的compilation对象
Dependence：依赖对象，webpack基于该类型记录模块间依赖关系
Module：webpack内部所有资源都会以module对象形式存在，所有关于资源的操作、转译、合并都是以module为基本单位进行的
Chunk：编译完成准备输出时，webpack会将module按特定的规则组织成一个一个的chunk，这些chunk某种程度上跟最终输出一一对应
Loader：资源内容转换器，实现从内容A转换B的转换器
Plugin：webpack构建过程中，会在特定时机广播对应的事件，插件监听这些事件

loader

loader是文件加载器，能加载资源文件并对文件作处理，如编译压缩。运行在打包文件之前。

plugin

插件，有更多功能，比如压缩文件。在整个编译周期都起作用。

热更新 HMR

使用

plugin中设置hmr，devServer中hot设置为true

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

module.exports = {
    entry:'./src/index.js', // 入口
    output:{
        path:path.resolve(__dirname, 'dist') // 输出文件夹
        filenmae:'output.js' // 输出文件名
    },
    mode:'development', //开发模式
    devServer:{
        static:path.resolve(__dirname, 'dist'),
        hot:true
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ]
}

原理

概括：由一个服务器和一个客户端组成。服务器负责监听文件变化，并通知客户端。客户端负责接收服务器通知，并根据需要替换或更新模块。 webpack提供了两种方式：webpack-dev-server和webpack-hot-middleware

webpack-dev-server

这是一个基于express的轻量级服务器。它可以在本地启动一个静态资源服务器，并支持热更新。webpack-dev-server内部使用了webpack-dev-middleware和webpack-hot-middleware两个中间件。webpack-dev-middleware负责将webpack打包后的文件暂存到内存里，提供给浏览器访问。webpack-hot-middleware负责建立一个websocket连接，用于将文件变化的信息推送给浏览器。

webpack-hot-middleware

这是一个基于connect的中间件，它可以和任何基于connect和express的服务器配合使用，实现热更新。它也是websocket来通信的，但是它不会将打包后的文件暂存到内存中，而是直接从硬盘读取

webpack记录