program seal emit 初始化option 开始编译 从entry开始递归的 分析依赖，对每个 依赖模块进行build 对模块位置进行解析 将loader加载完成的 module进行编译，生成 AST树 遍历AST，当遇到 require等一些调用表 达式时，收集依赖 所有依赖build完 成，开始优化 输出到dist目录 build-module 开始构建某个模块 ‘b’] NormalModule Build ·使用 loader-runner 运行 loaders ·通过 Parser 解析 (内部是 acron) ·ParserPlugins 添加依赖 Compilation hooks 模块相关： ·build-module ·failed-module ·succeed-module 资源生成相关： ·module-asset webpack 先将 entry 中对应的 module 都生成一个新的 chunk 2. 遍历 module 的依赖列表，将依赖的 module 也加入到 chunk 中 3. 如果一个依赖 module 是动态引入的模块，那么就会根据这个 module 创建一个 新的 chunk，继续遍历依赖 4. 重复上面的过程，直至得到所有的 chunks 模块化：增强代码可读性和维护性 传统的网页开发转变成

includes 语法已被废弃 • 可以通过 Rule.parser.requireInclude 将⾏为改为允许、废弃或禁⽤。 webpack 5 webpack 4 之前的版本是：如果某个模块依赖 Node.js 里面的核心模块，那么这个模块被引入的时候会把 Node.js 整个 polyfill 顺带引入。 功能清除：不再为 Node.js 模块引⼊ polyfill 功能清除：不再为 发明者：Zack Jackson 基本解释：使 ⼀个JavaScript 应⽤在运⾏过程中可以动态加载另⼀个应⽤的代码，并⽀持共享依赖（CDN）。不再需要 本地安装 npm 包。 • Remote：被依赖⽅，被 Host 消费的 webpack 构建 • Host：依赖⽅，消费其他 Remote 的 webpack 构建 一个应用可以是 Host，也可以是 Remote，也可以同时是 Host library：必须，其中这⾥的 name 为作为 umd 的 name； • remotes：可选，表示作为 Host 时，去消费哪些 Remote； • shared：可选，优先⽤ Host 的依赖，如果 Host 没有，再⽤⾃⼰的； • main.js：应⽤主⽂件 • remoteEntry.js：作为 remote 时被引的⽂件 开创性的特性：模块联邦使⽤案例 应用一（host） 应用二（remote）

08 基础篇：webpack 进阶⽤用法 03 核⼼心概念之 Entry Entry ⽤用来指定 webpack 的打包⼊入⼝口 理理解依赖图的含义 依赖图的⼊入⼝口是 entry 对于⾮非代码⽐比如图⽚片、字体依赖也会 不不断加⼊入到依赖图中 Entry 的⽤用法 module.exports = { entry: './path/to/my/entry/file.js' }; 通过占位符确保⽂文件名称的唯⼀一 核⼼心概念之 Loaders webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文 件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。 本身是一个函数，接受源文件作为参数，返回转换的结果。 常⻅见的 Loaders 有哪些？ Loaders 的⽤用法 const path = require('path'); module

请务必阅读 npm模块管理器 package.json 如果你熟悉 npm 则可以利用 package.json 保存所有 npm install --save-dev gulp-xxx 模块依赖和 模块版本。 在命令行输入 npm init 会依次要求补全项目信息，不清楚的可以直接回车跳过 name: (gulp-demo) version: (1.0.0) description: " } 安装依赖 安装 gulp 到项目（防止全局 gulp 升级后与此项目 gulpfile.js 代码不兼容） npm install gulp --save-dev 此时打开 package.json 会发现多了如下代码 "devDependencies": { "gulp": "^3.8.11" } 声明此项目的开发依赖 gulp 接着安装其他依赖： 安装模块较 配置分享给你的朋友时，就不需要将 node_modules/ 发送给他，他只需在命令 行输入 npm install 就可以检测 package.json 中的 devDependencies 并安装所有依赖。 设计目录结构 我们将文件分为2类，一类是源码，一类是编译压缩后的版本。文件夹分别为 src 和 dist 。(注意区分 dist 和 · dest 的区别) └── src/ │ └──

速度分析插件作用 分析整个打包总耗时 每个插件和loader的耗时情况 webpack-bundle-analyzer 分析体积 代码示例 构建完成后会在 8888 端口展示大小 可以分析哪些问题？ 依赖的第三方模块文件大小 业务里面的组件代码大小 使用高版本的 webpack 和 Node.js 构建时间降低了 60%-98%！ 使用 webpack4：优化原因 V8 带来的优化（for HappyPack工作流程 原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中 代码示例 多进程/多实例：使用 thread-loader 解析资源 原理：每次 webpack 解析一个模块，thread- loader 会将它及它的依赖分配给 worker 线程中 多进程/多实例：并行压缩 方法一：使用 parallel-uglify-plugin

https://travis-ci.org/account/repositories 为项目开启 3. 项目根目录下新增 .travis.yml travis.yml 文件内容 install 安装项目依赖 script 运行测试用例 发布到 npm 添加用户： npm adduser 升级补丁版本号：npm version patch 升级版本 升级小版本号：npm version minor Z 在发布重要版本时，可以发布alpha, rc 等先行版本 alpha和rc等修饰版本的关键字后面可 以带上次数和meta信息 遵守 semver 规范的优势 优势： ·避免出现循环依赖 ·依赖冲突减少 语义化版本（Semantic Versioning）规范格式 次版本号：当你做了向下兼容的功能性新增， 主版本号：当你做了不兼容的 API 修改， 修订号：当你做了向下兼容的问题修正。

}; b-loader.js: loader-runner 介绍 定义：loader-runner 允许你在不安装 webpack 的情 况下运行 loaders ·作为 webpack 的依赖，webpack 中使用它执行 loader ·进行 loader 的开发和调试 作用： loader-runner 的使用 import { runLoaders } from "loader-runner"; 中使用缓存 webpack 中默认开启 loader 缓存 ·可以使用 this.cacheable(false) 关掉缓存 缓存条件： loader 的结果在相同的输入下有确定的输出 ·有依赖的 loader 无法使用缓存 loader 如何进行文件输出？ 通过 this.emitFile 进行文件写入 const loaderUtils = require("loader-utils");

react-dom redux react-redux -S · 安装 geektime-builder-webpack npm i geektime-builder-webpack -D 安装依赖 · 安装 @babel/core npm i @babel/core -D · actions 和 reducers src/actions/ 放置所有的actions、src/reducers