的。找到这 些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。 将规律转换为 gulp 代码 现有目录结构如下： └── js/ └── a.js 规律 1. 找到 js/目录下的所有 .js 文件 2. 压缩这些 js 文件 3. 将压缩后的代码另存在 dist/js/ 目录下 编写 gulp 代码 // 压缩 JavaScript 文件 gulp js') // 2. 压缩 .pipe(uglify()) // 3. 另存 .pipe(gulp.dest('dist/js')); }); 代码执行结果 代码执行后文件结构 └── js/ │ └── a.js └── dist/ └── js/ └── a.js gulp 入门指南 - 1 - 本文档使用 看云 如果你在命令行中启动了一些一直运行的命令，你的命令行会进入“运行”状态，此时你不可以在命令行 进行其他操作。可通过 Ctrl + C 停止 gulp。（Mac 中使用 control + C ） 后面的章节中如果代码中存在 gulp.watch 并在命令行运行了 gulp 则需要使用 Ctrl + C 退出任务。 npm 模块管理器 如果你了解 npm 则跳过此章节 若你不了解npm 请阅读 npm模块管理器

] + } + } ] } ] } }; 浏览器器的分辨率 CSS 媒体查询实现响应式布局 缺陷：需要写多套适配样式代码 @media screen and (max-width: 980px) { .header { width: 900px; } } @media screen and (max-width: ⻚页⾯面渲染时计算根元素的 font-size 值 ·可以使⽤用⼿手淘的lib-flexible库 ·https://github.com/amfe/lib-flexible 资源内联的意义 代码层⾯面： 请求层⾯面：减少 HTTP ⽹网络请求数 ·⻚页⾯面框架的初始化脚本 ·上报相关打点 · css 内联避免⻚页⾯面闪动 · ⼩小图⽚片或者字体内联 (url-loader) HTML map 定位到源代码 · 线上排查问题的时候可以将 sourcemap 上传到错误监控系统 · source map科普⽂文：http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html source map 关键字 source map: 产⽣生.map⽂文件 eval: 使⽤用eval包裹模块代码 cheap: 不不包含列列信息

//生成 webpack loader 代码 "generate-plugin", //生成 webpack plugin 代码 "info” webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数 options Webpack 的本质 Webpack可以将其理解是一种基于事件流的编程范例，一系列的插件运行。 先看一段代码 class Compiler extends Tapable { // ... } class Compilation extends Tapable { // ... } 创建一个 新的 chunk，继续遍历依赖 4. 重复上面的过程，直至得到所有的 chunks 模块化：增强代码可读性和维护性 传统的网页开发转变成 Web Apps 开发 代码复杂度在逐步增高 部署时希望把代码优化成几个 HTTP 请求 分离的 JS文件/模块，便于后续代码的维护性 常见的几种模块化方式 CJS ES module AMD import * as largeNumber

webpack 5 webpack 4 构建优化：Tree Shaking 优化-内部模块 Tree shaking 代码⽣成：⽀持⽣成 ES6 代码 webpack 4 之前只⽣成 ES5 的代码。 webpack 5 则现在既可以⽣成 ES5 ⼜可以⽣成 ES6/ES2015 代码。 两种设置⽅式：5 =< ecmaVersion <= 11 或 2009 =< ecmaVersion <= 2020 2020 开创性的特性：模块联邦 发明者：Zack Jackson 基本解释：使 ⼀个JavaScript 应⽤在运⾏过程中可以动态加载另⼀个应⽤的代码，并⽀持共享依赖（CDN）。不再需要 本地安装 npm 包。 • Remote：被依赖⽅，被 Host 消费的 webpack 构建 • Host：依赖⽅，消费其他 Remote 的 webpack 构建 一个应用可以是 Host，也可以是 源码加工成 JS 模块 updateStyle 会通过 CSS Style Shee API 后者 直接创建