基于流程了解webpack

# 基于流程了解 webpack

## 一、概述

    - 目的：自动化构建代码
    - 流程：1. 搜索所有依赖模块
        2. 解析模块
        3. 打包
        4. 再次打包
    - 环境：开发环境、测试环境、生产环境

## 二、流程概览

### 0、整个构建

    主要配置项
    - entry：入口文件
    - resolve：搜索匹配规则
    - module.rules：解析规则
    - plugins：插件功能
    - optimization：优化构建的项目
    - output：输出文件及相关配置
    - devServer：本地开发及相关配置（用于开发环境）其它
    - 记录构建耗时：speed-measure-webpack-plugin
    - 添加运行时的环境变量：webpack.definePlugin、dotenv-webpack
    - 动态生成包含资源路径的 html：html-webpack-plugin

### 1、搜索所有依赖模块

    该阶段主要通过配置项 entry 为入口文件，确定所有依赖的模块构成依赖树
    - 减小搜索的范围：配置项 resolve

### 2、解析模块

    - 减少不必要的解析：为 loader 添加 exclude
    - 提取 css 并生成 source map：mini-css-extract-plugin
    - 语法编译：babel-loader
    - 优化开销大的解析：thread-loader（多线程解析）### 3、打包

    - 减少单个包的大小，按需加载的支持：optimization.(splitChunks、runtimeChunk)
    - 提高压缩速度：terser-webpack-plugin（多线程压缩）- 压缩 css：optimize-css-assets-webpack-plugin
    - 将静态资源复制到打包文件夹：copy-webpack-plugin

### 4、再次打包

    - 将第三方的文件缓存：webpack.HashedModuleIdsPlugin、dll（需添加 dll 配置文件）## 三、名词注解

    - 运行时（runtime）：构建生成的项目处于运行状态时
    - output.publicPath：作用于构建的项目的打包资源的路径前缀，如：打包文件名 't/test.js',publicPath='./a/'，结果为 "./a/t/test.js"；publicPath='http://cdn.test.com/app'，结果为 'http://cdn.test.com/app/t/test.js'
    - devServer.publicPath：启动的开发服务器基于 publicPath 的值提供服务
    - hash：默认基于当次构建动态生成 id，然后基于构建内容生成 hash，可通过 webpack.HashedModuleIdsPlugin 基于文件的相对路径生成 id，避免内容不变 hash 改变
    - chunkhash：针对每个拆分的 chunk 的内容生成的 hash
    - contenthash：一般用于 css 文件