《玩转webpack》 第四章 进阶篇: 编写可维护的 webpack 构建配置"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 良好的 Git commit 规范优势: ·根据 Git Commit 的元数据生成 Changelog ·后续维护者可以知道 Feature 被修改的原因 技术方案 提交格式要求 本地开发阶段增加 precommit 钩子 安装 husky 通过 commitmsg 钩子校验信息 npm install husky --save-dev "scripts": { "commitmsg":0 码力 | 30 页 | 5.38 MB | 1 年前3
《玩转webpack》 第三章 基础篇 Webpack 进阶用法个模块可能有多个⽅方法,只要其中的某个⽅方法使⽤用到了了,则整个⽂文件都会被打到 bundle ⾥里里⾯面去,tree shaking 就是只把⽤用到的⽅方法打⼊入 bundle ,没⽤用到的⽅方法会在 uglify 阶段被擦除掉。 使⽤用:webpack 默认⽀支持,在 .babelrc ⾥里里设置 modules: false 即可 要求:必须是 ES6 的语法,CJS 的⽅方式不不⽀支持 · production 利利⽤用 ES6 模块的特点: ·只能作为模块顶层的语句句出现 · import 的模块名只能是字符串串常量量 · import binding 是 immutable的 代码擦除: uglify 阶段删除⽆无⽤用代码 现象:构建后的代码存在⼤大量量闭包代码 编译后(bundle.js) 编译前 (source code) 会导致什什么问题? 运⾏行行代码时创建的函数作⽤用域变多,内存开销变⼤大 代码分割的效果 ESLint 的必要性 2017年年4⽉月13⽇日,腾讯⾼高级⼯工程师⼩小明在做充值业务时,修改了了苹果 iap ⽀支付配 置,将 JSON 配置增加了了重复的 key 。代码发布后,有⼩小部分使⽤用了了 vivo ⼿手 机的⽤用户反馈充值⻚页⾯面⽩白屏,⽆无法在 Now app 内进⾏行行充值。最后问题定位是: vivo ⼿手机使⽤用了了系统⾃自带的 webview ⽽而没有使⽤用0 码力 | 69 页 | 4.33 MB | 1 年前3
《玩转webpack》第七章 原理篇: 编写 Loader 和插件warnings 和 errors 接收 compilation.warnings.push("warning"); compilation.errors.push("error"); 参数校验阶段可以直接 throw 的方式抛出 throw new Error(“ Error Message”) 通过 Compilation 进行文件写入 Compilation 上的 assets 可以用于文件写入 zip"); }); jszip 使用示例 复习:Compiler 上负责文件生成的 hooks Hooks 是 emit,是一个异步的 hook (AsyncSeriesHook) emit 生成文件阶段,读取的是 compilation.assets 对象的值 ·可以将 zip 资源包设置到 compilation.assets 对象上0 码力 | 29 页 | 4.37 MB | 1 年前3
《玩转webpack》加餐:webpack5专题录 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 webpack 4 构建速度对⽐ ⽬ 录 CONTENTS webpack 5 新特性解析 01 bundle 和 bundless 的差异 02 Vite 的构建原理 03 Vite 发布 2.0 版本 更早实践 bundless 的⼯具:Snowpack 真的可以不⽤打包吗? 浏览器对 ESM 的⽀持情况 各浏览器在 HTTP/1.1 协议下的最大并行请求数限制 HTTP/10 码力 | 40 页 | 12.03 MB | 1 年前3
《玩转webpack》第五章 进阶篇: webpack 构建速度和体积优化策略个模块可能有多个方法,只要其中的某个方法使用到了,则整个文件都会被打到 bundle 里面去,tree shaking 就是只把用到的方法打入 bundle ,没用到的方法会在 uglify 阶段被擦除掉。 使用:webpack 默认支持,在 .babelrc 里设置 modules: false 即可 要求:必须是 ES6 的语法,CJS 的方式不支持 · production mode的情况下默认开启0 码力 | 36 页 | 8.13 MB | 1 年前3
《玩转webpack》 第一章 基础篇: webpack 与构建发展简史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 为什什么选择 webpack0 码力 | 17 页 | 690.93 KB | 1 年前3
《玩转webpack》第六章 原理篇: 通过源码掌握 webpack 打包原理//异步串行流水钩子 } = require("tapable"); Tapable 是一个类似于 Node.js 的 EventEmitter 的库, 主要是控制钩子函数的发布 与订阅,控制着 webpack 的插件系统。 Tapable库暴露了很多 Hook(钩子)类,为插件提供挂载的钩子 Tapable hooks 类型 Tapable 的使用 -new Hook0 码力 | 39 页 | 3.66 MB | 1 年前3
Gulp 入门指南gulp 入门指南 - 34 - 本文档使用 看云 构建 完整代码 访问论坛获取帮助 你还想了解什么关于 gulp 的什么知识? 告诉我们 后续还会又新章节更新。你可以订阅本书 当有新章节发布时,我们会通过邮件告诉你 gulp 入门指南 - 35 - 本文档使用 看云 构建0 码力 | 36 页 | 275.87 KB | 1 年前3
共 8 条
- 1













