《玩转webpack》 第四章 进阶篇: 编写可维护的 webpack 构建配置
install 安装项目依赖 script 运行测试用例 发布到 npm 添加用户: npm adduser 升级补丁版本号:npm version patch 升级版本 升级小版本号:npm version minor 升级大版本号:npm version major 发布版本:npm publish Git 规范和 Changelog 生成 ·加快 Code Review 的流程 "husky": "^0.13.1" } Changelog 生成 开源项目版本信息案例 React 版本信息 版本是严格递增的,此处是:16.2.0 - > 16.3.0 -> 16.3.1 软件的版本通常由三位组成,形如: X.Y.Z 在发布重要版本时,可以发布alpha, rc 等先行版本 alpha和rc等修饰版本的关键字后面可 以带上次数和meta信息 遵守 semver 规范的优势 规范的优势 优势: ·避免出现循环依赖 ·依赖冲突减少 语义化版本(Semantic Versioning)规范格式 次版本号:当你做了向下兼容的功能性新增, 主版本号:当你做了不兼容的 API 修改, 修订号:当你做了向下兼容的问题修正。 先行版本号 先行版本号可以作为发布正式版之前的版本,格式是在修订版本号后面加上一个连接 号(-),再加上一连串以点(.)分割的标识符,标识符可以由英文、数字和连接号0 码力 | 30 页 | 5.38 MB | 1 年前3Gulp 入门指南
function demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi"); 此时 dist/js 目录下的 .js 文件都是压缩后的版本。 你还可以监控 js/ 目录下的 js 文件,当某个文件被修改时,自动压缩修改文件。启动 gulp 后就可以让它 帮助你自动构建 Web 项目。 gulp 还可以做很多事,例如: 1. 压缩CSS 终端(Mac) 打开 Launchpad(像火箭一样的图标),在屏幕上方搜索框中输入 终端 + Enter 打开终端。 查看 node 版本号 在终端/命令行中输入 node - v 检测node是否安装成功,安装成功会显示出 node 的版本号。 跳转目录 终端/命令行 中可使用 cd 目录名 跳转至指定目录,Mac 中还可以使用 ls 查看当前目录下的文件列 表。 Windows npm模块管理器 package.json 如果你熟悉 npm 则可以利用 package.json 保存所有 npm install --save-dev gulp-xxx 模块依赖和 模块版本。 在命令行输入 npm init 会依次要求补全项目信息,不清楚的可以直接回车跳过 name: (gulp-demo) version: (1.0.0) description: entry0 码力 | 36 页 | 275.87 KB | 1 年前3《玩转webpack》加餐:webpack5专题
changelog:https://webpack.js.org/blog/2020-10-10-webpack-5-release/ webpack 5 新特性概览 最低支持的 Node.js 版本从 6 增加到 10.13.0 最⼩ Node.js 版本:10.13.0 功能清除:清理弃⽤的能⼒ 所有在 webpack 4 里面被废弃的能力都被清除,因此需要确保 webpack4 没有打印警告。 require.includes includes 语法已被废弃 • 可以通过 Rule.parser.requireInclude 将⾏为改为允许、废弃或禁⽤。 webpack 5 webpack 4 之前的版本是:如果某个模块依赖 Node.js 里面的核心模块,那么这个模块被引入的时候会把 Node.js 整个 polyfill 顺带引入。 功能清除:不再为 Node.js 模块引⼊ polyfill 功能清除:不再为 webpack 4 构建速度对⽐ ⽬ 录 CONTENTS webpack 5 新特性解析 01 bundle 和 bundless 的差异 02 Vite 的构建原理 03 Vite 发布 2.0 版本 更早实践 bundless 的⼯具:Snowpack 真的可以不⽤打包吗? 浏览器对 ESM 的⽀持情况 各浏览器在 HTTP/1.1 协议下的最大并行请求数限制 HTTP/1.1 的请求数限制0 码力 | 40 页 | 12.03 MB | 1 年前3《玩转webpack》第六章 原理篇: 通过源码掌握 webpack 打包原理
"migrate", //进行 webpack 版本迁移 "add", //往 webpack options: 解析参数(alias 和 解析的文件后缀设置) ·Optimizing options: 优化参数 ·Stats options: 统计参数 ·options: 通用参数(帮助命令、版本信息等) webpack-cli 执行的结果 最终会根据配置参数实例化 webpack 对象,然后执行构建流程 webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数 options0 码力 | 39 页 | 3.66 MB | 1 年前3《玩转webpack》 第三章 基础篇 Webpack 进阶用法
eslint-loader,构建时检查 JS 规范 webpack 打包库和组件 webpack 除了了可以⽤用来打包应⽤用,也可以⽤用来打包 js 库 实现⼀一个⼤大整数加法库的打包 · 需要打包压缩版和⾮非压缩版本 ·⽀支持 AMD/CJS/ESM 模块引⼊入 库的⽬目录结构和打包要求 + |- /dist + |- large-number.js + |- large-number.min 如何判断构建是否成功? 每次构建完成后输⼊入 echo $? 获取错误码 在 CI/CD 的 pipline 或者发布系统需要知道当前构建状态 构建异常和中断处理理 webpack4 之前的版本构建失败不不会抛出错误码 (error code) Node.js 中的 process.exit 规范 · 0 表示成功完成,回调函数中,err 为 null · ⾮非 0 表示执⾏行行失败,回调函数中,err0 码力 | 69 页 | 4.33 MB | 1 年前3《玩转webpack》第五章 进阶篇: webpack 构建速度和体积优化策略
webpack-bundle-analyzer 分析体积 代码示例 构建完成后会在 8888 端口展示大小 可以分析哪些问题? 依赖的第三方模块文件大小 业务里面的组件代码大小 使用高版本的 webpack 和 Node.js 构建时间降低了 60%-98%! 使用 webpack4:优化原因 V8 带来的优化(for of 替代 forEach、Map 和 Set 替代 Object、includes0 码力 | 36 页 | 8.13 MB | 1 年前3
共 6 条
- 1