gulp 还可以做很多事，例如： 1. 压缩CSS 2. 压缩图片 3. 编译Sass/LESS 4. 编译CoffeeScript 5. markdown 转换为 html gulp 入门指南 - 2 - 本文档使用 看云 构建 安装 Node 和 gulp gulp 是基于 node 实现的，那么我们就需要先安装 node。 Node 是一个基于Chrome JavaScript V8引擎建立的一个平台，可以利用它实现 按钮下载安装 node。 使用终端/命令行 命令行 在 Windows 中可按 徽标键（alt键左边）+ R 打开输入 cmd + Enter 打开命令行。 终端(Mac) 打开 Launchpad（像火箭一样的图标），在屏幕上方搜索框中输入 终端 + Enter 打开终端。 查看 node 版本号 在终端/命令行中输入 node - v 检测node是否安装成功，安装成功会显示出 请阅读 npm模块管理器 安装 gulp npm 是 node 的包管理工具，可以利用它安装 gulp 所需的包。（在安装 node 时已经自动安装了 npm） 在命令行输入 npm install -g gulp 若一直没安装成功，请使用 cnpm 安装(npm的国内加速镜像) 意思是：使用 npm 安装全局性的( -g ) gulp 包。 如果你安装失败，请输入 sudo npm

const isInstalled = packageName =>{...}; //3. 判断某个包是否安装 const CLIs =[...]; //5. 判断是否两个 ClI 是否安装了 if (installedClis.length === 0){...}else if //6. 根据安装数量进行处理 (installedClis.length === 1){...}else{ 包，并且 执行 CLI webpack-cli 做的事情 引入 yargs，对命令行进行定制 分析命令行参数，对各个参数进行转换，组成编译配置项 引用webpack，根据配置项进行编译和构建 从NON_COMPILATION_CMD分析出不需要编译的命令 const { NON_COMPILATION_ARGS } = require("./utils/constants"); const

的模块名只能是字符串串常量量 · import binding 是 immutable的 代码擦除： uglify 阶段删除⽆无⽤用代码 现象：构建后的代码存在⼤大量量闭包代码 编译后（bundle.js） 编译前 (source code) 会导致什什么问题？ 运⾏行行代码时创建的函数作⽤用域变多，内存开销变⼤大 ⼤大量量作⽤用域包裹代码，导致体积增⼤大（模块越多越明显） 模块转换分析 懒加载 JS 脚本的⽅方式 CommonJS：require.ensure ES6：动态 import（⽬目前还没有原⽣生⽀支持，需要 babel 转换） 如何使⽤用动态 import? 安装 babel 插件 ES6：动态 import（⽬目前还没有原⽣生⽀支持，需要 babel 转换） npm install @babel/plugin-syntax-dynamic-import 如何执⾏行行落地？ 和 CI/CD 系统集成 和 webpack 集成 ⽅方案⼀一：webpack 与 CI/CD 集成 增加 lint pipline 本地开发阶段增加 precommit 钩⼦子 安装 husky 增加 npm script，通过 lint-staged 增量量检查修改的⽂文件 npm install husky --save-dev "scripts": { "precommit":

⻓期缓存：确定的模块 Id、chunk 和导出名称 持久化缓存 在 webpack 4 ⾥⾯，可以使⽤ cache-loader 将编译结果写⼊硬盘缓存，还可以使⽤ babel-loader，设置 option.cacheDirectory 将 babel-loader 编译的结果写进磁盘。 webpack 5 缓存策略 • 默认开启缓存，缓存默认是在内存⾥。可以对 cache 进⾏设置 。 • 2020 开创性的特性：模块联邦 发明者：Zack Jackson 基本解释：使 ⼀个JavaScript 应⽤在运⾏过程中可以动态加载另⼀个应⽤的代码，并⽀持共享依赖（CDN）。不再需要 本地安装 npm 包。 • Remote：被依赖⽅，被 Host 消费的 webpack 构建 • Host：依赖⽅，消费其他 Remote 的 webpack 构建 一个应用可以是 Host，也可以是 template 的部分 进⾏渲染 Vite 打包流程 – vue 脚本打包策略 判断是否是 .css 文件的请求 判断是否为 JS 中 import 的 CSS 进行 Sass/Less 的编译处理 基于 CSS 的源码包装成 JS 的模块 Vite 打包流程 – CSS 资源打包策略 将 CSS 源码加工成 JS 模块 updateStyle 会通过 CSS Style Shee

the best feature! Rspack 有哪些特性？ ??? Rust 实现核心部分，充分利用并发和 LTO 优化 Rspack 有哪些特性？ ???️ O(≈1) 增量 HMR，只编译修改的模块 Rspack 有哪些特性？ ⚡️ Dev 启动耗时 Rspack 有哪些特性？ 一些业务收益 Webpack Rspack 提升 build 380s 28s 13 倍 dev Webpack 迁移到 Rspack？ ??? Rust is faster than JavaScript • 优先使用内置功能 • SWC > babel-loader，Rspack 使用 SWC 编译 JavaScript 代码 • experiments.css > style-loader + css-loader，Rspack 使用 SWC 实 现了 experiments.css，默认开启 支持更多常用框架：Vue、Qwik 等 2. 完善插件 API，兼容更多 Webpack 生态 3. 支持 Module Federation 模块联邦 4. 支持 Lazy Compilation 懒编译 5. 支持 Persistent Cache 持久缓存 6. 更多生产环境优化策略 7. 持续优化构建性能 感谢 ??? Rspack 的实现离不开以下项目 ??? 了解更多 • 官方文档

entry: { app: './src/app.js', adminApp: './src/adminApp.js' } }; 核⼼心概念之 Output Output ⽤用来告诉 webpack 如何将编译后的⽂文件输出到磁盘 Output 的⽤用法：单⼊入⼝口配置 module.exports = { entry: './path/to/my/entry/file.js' output: { filename: on port 3000!\n'); }); WDM 将 webpack 输出的⽂文件传输给服务器器 适⽤用于灵活的定制场景 热更更新的原理理分析 Webpack Compile: 将 JS 编译成 Bundle HMR Server: 将热更更新的⽂文件输出给 HMR Rumtime Bundle server: 提供⽂文件在浏览器器的访问 HMR Rumtime: 会被注⼊入到浏览器器，

/dist/main.js 环境搭建：安装 Node.js 和 NPM ·通过 curl 安装：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash 安装 nvm（https://github.com/nvm-sh/nvm） ·通过 wget 安装：wget -qO- https://raw sh | bash 安装 Node.js 和 NPM ·nvm install v10.15.3 ·检查是否安装成功：node -v, npm -v 环境搭建：安装 webpack 和 webpack-cli 安装 webpack 和 webpack-cli ·npm install webpack webpack-cli --save-dev ·检查是否安装成功：./node_modules/ "build": "webpack" }, "keywords": [], "author": "", "license": "ISC" } 通过 npm run build 运⾏行行构建 原理理：模块局部安装会在 node_modules/.bin ⽬目录创建软链接 扫码试看/订阅 《玩转 webpack》

init -y · 创建项⽬目⽬目录 · 安装 react、react-dom、redux、react-redux npm i react react-dom redux react-redux -S · 安装 geektime-builder-webpack npm i geektime-builder-webpack -D 安装依赖 · 安装 @babel/core npm i @babel/core

expect(add(1, 2).to.equal(3)); }); }); 单元测试接入 2. 新建 test 目录，并增加 xxx.test.js 测试文件 1. 安装 mocha + chai 3. 在 package.json 中的 scripts 字段增加 test 命令 "scripts": { "test": "node_modules/mocha/bin/_mocha” https://travis-ci.org/account/repositories 为项目开启 3. 项目根目录下新增 .travis.yml travis.yml 文件内容 install 安装项目依赖 script 运行测试用例 发布到 npm 添加用户： npm adduser 升级补丁版本号：npm version patch 升级版本 升级小版本号：npm version 规范优势： ·根据 Git Commit 的元数据生成 Changelog ·后续维护者可以知道 Feature 被修改的原因 技术方案 提交格式要求 本地开发阶段增加 precommit 钩子 安装 husky 通过 commitmsg 钩子校验信息 npm install husky --save-dev "scripts": { "commitmsg": "validate-commit-msg"

Externals 思路：将 react、react-dom 基础包通过 cdn 引入，不打入 bundle 中 方法：使用 html-webpack-externals- plugin 进一步分包：预编译资源模块 思路：将 react、react-dom、redux、react-redux 基础包和业务基础包打包成一个文件 方法：使用 DLLPlugin 进行分包，DllReferencePlugin