js ‘ } }; 缺点：每次新增或删除⻚页⾯面需要改 webpack 配置 每个⻚页⾯面对应⼀一个 entry，⼀一个 html-webpack-plugin 多⻚页⾯面打包通⽤用⽅方案 动态获取 entry 和设置 html-webpack-plugin 数量量 利利⽤用 glob.sync module.exports = { entry: { index: './src/index/index 脚本懒加载，使得初始下载的代码更更⼩小 懒加载 JS 脚本的⽅方式 CommonJS：require.ensure ES6：动态 import（⽬目前还没有原⽣生⽀支持，需要 babel 转换） 如何使⽤用动态 import? 安装 babel 插件 ES6：动态 import（⽬目前还没有原⽣生⽀支持，需要 babel 转换） npm install @babel/plugin-syntax-dynamic-import 代码分割的效果 ESLint 的必要性 2017年年4⽉月13⽇日，腾讯⾼高级⼯工程师⼩小明在做充值业务时，修改了了苹果 iap ⽀支付配 置，将 JSON 配置增加了了重复的 key 。代码发布后，有⼩小部分使⽤用了了 vivo ⼿手 机的⽤用户反馈充值⻚页⾯面⽩白屏，⽆无法在 Now app 内进⾏行行充值。最后问题定位是： vivo ⼿手机使⽤用了了系统⾃自带的 webview ⽽而没有使⽤用

录 CONTENTS webpack 5 新特性解析 01 bundle 和 bundless 的差异 02 Vite 的构建原理 03 webpack 5 在 2020-10-10 正式发布 官方 changelog：https://webpack.js.org/blog/2020-10-10-webpack-5-release/ webpack 5 新特性概览 最低支持的 Node ecmaVersion <= 11 或 2009 =< ecmaVersion <= 2020 开创性的特性：模块联邦 发明者：Zack Jackson 基本解释：使 ⼀个JavaScript 应⽤在运⾏过程中可以动态加载另⼀个应⽤的代码，并⽀持共享依赖（CDN）。不再需要 本地安装 npm 包。 • Remote：被依赖⽅，被 Host 消费的 webpack 构建 • Host：依赖⽅，消费其他 Remote webpack 4 构建速度对⽐ ⽬ 录 CONTENTS webpack 5 新特性解析 01 bundle 和 bundless 的差异 02 Vite 的构建原理 03 Vite 发布 2.0 版本 更早实践 bundless 的⼯具：Snowpack 真的可以不⽤打包吗？ 浏览器对 ESM 的⽀持情况 各浏览器在 HTTP/1.1 协议下的最大并行请求数限制 HTTP/1

//返回与本地环境相关的一些信息 ]; webpack-cli 提供的不需要编译的命令 命令行工具包 yargs 介绍 提供命令和分组参数 动态生成 help 帮助信息 webpack-cli 使用 args 分析 参数分组 (config/config-args.js)，将命令划分为9类： ·Config options: 配置相关参数(文件名称、运行环境等) //异步串行流水钩子 } = require("tapable"); Tapable 是一个类似于 Node.js 的 EventEmitter 的库, 主要是控制钩子函数的发布 与订阅,控制着 webpack 的插件系统。 Tapable库暴露了很多 Hook（钩子）类，为插件提供挂载的钩子 Tapable hooks 类型 Tapable 的使用 -new Hook 先将 entry 中对应的 module 都生成一个新的 chunk 2. 遍历 module 的依赖列表，将依赖的 module 也加入到 chunk 中 3. 如果一个依赖 module 是动态引入的模块，那么就会根据这个 module 创建一个 新的 chunk，继续遍历依赖 4. 重复上面的过程，直至得到所有的 chunks 模块化：增强代码可读性和维护性 传统的网页开发转变成

"node": true } }; 冒烟测试 (smoke testing) 冒烟测试是指对提交测试的软件在进行详细深入的测试之前而进行的预测试，这种 预测试的主要目的是暴露导致软件需重新发布的基本功能失效等严重问题。 冒烟测试执行 ·是否有 JS、CSS 等静态资源文件 每次构建完成 build 目录是否有内容输出 ·是否有 HTML 文件 构建是否成功 判断构建是否成功 travis.yml 文件内容 install 安装项目依赖 script 运行测试用例 发布到 npm 添加用户： npm adduser 升级补丁版本号：npm version patch 升级版本 升级小版本号：npm version minor 升级大版本号：npm version major 发布版本：npm publish Git 规范和 Changelog 生成 ·加快 Code 生成 开源项目版本信息案例 React 版本信息 版本是严格递增的，此处是：16.2.0 - > 16.3.0 -> 16.3.1 软件的版本通常由三位组成，形如： X.Y.Z 在发布重要版本时，可以发布alpha, rc 等先行版本 alpha和rc等修饰版本的关键字后面可 以带上次数和meta信息 遵守 semver 规范的优势 优势： ·避免出现循环依赖 ·依赖冲突减少 语义化版本（Semantic

webpack-plugin 构建体积优化：动态 Polyfill babel-polyfill 打包后体积：88.49k，占比 29.6% Promise 的浏览器支持情况 构建体积优化：动态 Polyfill Polyfill Service原理 识别 User Agent，下发不同的 Polyfill 构建体积优化：如何使用动态 Polyfill service polyfill ll.min.js?unknown=polyfill&features=Promise,Map,Set 体积优化策略总结 Scope Hoisting Tree-shaking 图片压缩 动态 Polyfill 公共资源分离

webpack? webpack grunt gulp 定义 Module bundler Task runner Task runner 语⾔言 JavaScript Node.js Node.js 发布时间 2012.3 2012.6 2013.7 GitHub stars 40766 11796 29427 周下载量量 3,385,392 478,876 816,228 为什什么选择 webpack

gulp 入门指南 - 34 - 本文档使用 看云 构建 完整代码 访问论坛获取帮助 你还想了解什么关于 gulp 的什么知识？ 告诉我们 后续还会又新章节更新。你可以订阅本书 当有新章节发布时，我们会通过邮件告诉你 gulp 入门指南 - 35 - 本文档使用 看云 构建