seal emit 初始化option 开始编译 从entry开始递归的 分析依赖，对每个 依赖模块进行build 对模块位置进行解析 将loader加载完成的 module进行编译，生成 AST树 遍历AST，当遇到 require等一些调用表 达式时，收集依赖 所有依赖build完 成，开始优化 输出到dist目录 build-module 开始构建某个模块 WebpackOptionsApply (large-number) { // ... largeNumber.add('999', '1'); }); AST 基础知识 抽象语法树（abstract syntax tree 或者缩写为 AST），或者语法树（syntax tree），是 源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。树上的每个节点都 表示源代码中的一种结构。 在线demo: https://esprima WEBPACK_REQUIRE_METHOD(0) 启动程序 · __webpack_require 用来加载模块，返回 module.exports 动手实现一个简易的 webpack 可以将 ES6 语法转换成 ES5 的语法 可以分析模块之间的依赖关系 生成的 JS 文件可以在浏览器中运行 ·通过 babylon 生成AST ·通过 babel-core 将AST重新生成源码 · 通过 babel-traverse

name: 'commons', chunks: 'all', minChunks: 2 } } } } } }; minuSize: 分离的包体积的⼤大⼩小 tree shaking(摇树优化) 概念：1 个模块可能有多个⽅方法，只要其中的某个⽅方法使⽤用到了了，则整个⽂文件都会被打到 bundle ⾥里里⾯面去，tree shaking 就是只把⽤用到的⽅方法打⼊入 bundle bundle ，没⽤用到的⽅方法会在 uglify 阶段被擦除掉。 使⽤用：webpack 默认⽀支持，在 .babelrc ⾥里里设置 modules: false 即可 要求：必须是 ES6 的语法，CJS 的⽅方式不不⽀支持 · production mode的情况下默认开启 DCE (Dead code elimination) 代码执⾏行行的结果不不会被⽤用到 代码不不会被执⾏行行，不不可到达 里里，然后适当的重命名⼀一 些变量量以防⽌止变量量名冲突 对⽐比: 通过 scope hoisting 可以减少函数声明代码和内存开销 scope hoisting 使⽤用 必须是 ES6 语法，CJS 不不⽀支持 webpack mode 为 production 默认开启 module.exports = { entry: { app: './src/app.js', search:

shaking(摇树优化)复习 概念：1 个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到 bundle 里面去，tree shaking 就是只把用到的方法打入 bundle ，没用到的方法会在 uglify 阶段被擦除掉。 使用：webpack 默认支持，在 .babelrc 里设置 modules: false 即可 要求：必须是 ES6 的语法，CJS 的方式不支持

gulpfile.js 中编写代码 中编写代码 // 获取 gulp var gulp = require('gulp') require() 是 node （CommonJS）中获取模块的语法。 在 gulp 中你只需要理解 require() 可以获取模块。 三、获取 三、获取 gulp-uglify gulp-uglify 组件 组件 // 获取 uglify 模块（用于压缩 task('default', function () { gulp.watch('src/js/**/*.js', ['uglifyjs']) }) src/js/**/*.js 是 glob 语法。百度百科：glob模式 、node-glob 在命令行输入 gulp 后会出现如下消息，表示已经启动。 [20:39:50] Using gulpfile ~/Documents/code/ [21:47:25] Dist dist/js/log.js 你可以访问 gulp-watch-path 了解更多。 stream-combiner2 编辑 log.js 文件时，如果文件中有 js 语法错误时，gulp 会终止运行并报错。 gulp 入门指南 - 26 - 本文档使用 看云 构建 当 log.js 缺少 ) log('gulp-book' 并保存文件时出现如下错误，但是错误信息不全面。而且还会让

Node.js 版本：10.13.0 功能清除：清理弃⽤的能⼒ 所有在 webpack 4 里面被废弃的能力都被清除，因此需要确保 webpack4 没有打印警告。 require.includes 语法已被废弃 • 可以通过 Rule.parser.requireInclude 将⾏为改为允许、废弃或禁⽤。 webpack 5 webpack 4 之前的版本是：如果某个模块依赖 Node.js 相关的请求地址添加时间戳，避免缓存。 如：import ‘/src/App.jsx?t=1599124870589’ Vite 打包流程 – 重写模块路径 浏览器不支持 JS 中直接写 import CSS、图片、JSON 等语法。 回顾一下 webpack loader 的处理策略： • CSS：转换成 js 的模块，执行模块会在 DOM 中创建