# 基于流程了解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文件