基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack -plugin 可以看到每个 loader 和插件执行耗时 代码示例 速度分析插件作用 分析整个打包总耗时 每个插件和loader的耗时情况 webpack-bundle-analyzer 分析体积 代码示例 构建完成后会在 8888 端口展示大小 可以分析哪些问题？ 依赖的第三方模块文件大小 业务里面的组件代码大小 使用高版本的 webpack 和 Node.js 构建时间降低了 构建时间降低了 60%-98%！ 使用 webpack4：优化原因 V8 带来的优化（for of 替代 forEach、Map 和 Set 替代 Object、includes 替代 indexOf） 默认使用更快的 md4 hash 算法 webpacks AST 可以直接从 loader 传递给 AST，减少解析时间 使用字符串方法替代正则表达式 多进程/多实例构建：资源并行解析可选方案

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack //生成 webpack loader 代码 "generate-plugin", //生成 webpack plugin 代码 "info” options: 高级用法(记录设置、缓存设置、监听频率、bail等) ·Resolving options: 解析参数(alias 和 解析的文件后缀设置) ·Optimizing options: 优化参数 ·Stats options: 统计参数 ·options: 通用参数(帮助命令、版本信息等) webpack-cli 执行的结果 最终会根据配置参数实例化 webpack 对象，然后执行构建流程

webpack 4 构建优化：Tree Shaking 优化-嵌套的 Tree shaking webpack 5 webpack 4 构建优化：Tree Shaking 优化-内部模块 Tree shaking 代码⽣成：⽀持⽣成 ES6 代码 webpack 4 之前只⽣成 ES5 的代码。 webpack 5 则现在既可以⽣成 ES5 ⼜可以⽣成 ES6/ES2015 代码。 两种设置⽅式：5 2009 =< ecmaVersion <= 2020 开创性的特性：模块联邦 发明者：Zack Jackson 基本解释：使 ⼀个JavaScript 应⽤在运⾏过程中可以动态加载另⼀个应⽤的代码，并⽀持共享依赖（CDN）。不再需要 本地安装 npm 包。 • Remote：被依赖⽅，被 Host 消费的 webpack 构建 • Host：依赖⽅，消费其他 Remote 的 webpack 源码加工成 JS 模块 updateStyle 会通过 CSS Style Shee API 后者 直接创建