//生成 webpack loader 代码 "generate-plugin", //生成 webpack plugin 代码 "info” //返回与本地环境相关的一些信息 ]; webpack-cli 提供的不需要编译的命令 命令行工具包 yargs 介绍 提供命令和分组参数 动态生成 help 帮助信息 webpack-cli 使用 args 分析 参数分组 (config/config-args.js)，将命令划分为9类： ·Config options: 配置相关参数(文件名称、运行环境等) 最终会根据配置参数实例化 webpack 对象，然后执行构建流程 webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数 options Webpack 的本质 Webpack可以将其理解是一种基于事件流的编程范例，一系列的插件运行。 先看一段代码 class Compiler extends Tapable { // ... } class Compilation

|- README.md + |- CHANGELOG.md + |- .eslinrc.js + |- package.json + |- index.js lib 放置源代码 test 放置测试代码 使用 ESLint 规范构建脚本 使用 eslint-config-airbnb-base eslint --fix 可以自动处理空格 module.exports = { 单纯的测试框架，需要断言库 集成框架，开箱即用 极简 API ·chai ·should.js ·expect ·better-assert 编写单元测试用例 技术选型：Mocha + Chai 测试代码：describe, it, except 测试命令：mocha add.test.js add.test.js const expect = require('chai').expect; "node_modules/mocha/bin/_mocha” }, npm i mocha chai -D 4. 执行测试命令 npm run test 持续集成的作用 优点： 核心措施是，代码集成到主干之前，必须通 过自动化测试。只要有一个测试用例失败， 就不能集成。 ·快速发现错误 ·防止分支大幅偏离主干 Github 最流行的 CI 接入 Travis CI 1. https://travis-ci

的。找到这 些规律，并编写 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模块管理器

打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 一个最简单的 loader 代码结构 module.exports = function(source) { return source; }; 定义：loader 只是一个导出为函数的 JavaScript 模块 callback -> return synchronous results // if (callback) { ... } callback(null, input + input); }; 示意代码： 在 loader 中使用缓存 webpack 中默认开启 loader 缓存 ·可以使用 this.cacheable(false) 关掉缓存 缓存条件： loader 的结果在相同的输入下有确定的输出 (Async) ·html-webpack-plugin-after-emit (Async) 编写一个压缩构建资源为zip包的插件 要求： ·生成的 zip 包文件名称可以通过插件传入 ·需要使用 compiler 对象上的特地 hooks 进行资源的生成 准备知识：Node.js 里面将文件压缩为 zip 包 使用 jszip (https://www.npmjs.com/package/jszip)

] + } + } ] } ] } }; 浏览器器的分辨率 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: 不不包含列列信息

08 基础篇：webpack 进阶⽤用法 03 核⼼心概念之 Entry Entry ⽤用来指定 webpack 的打包⼊入⼝口 理理解依赖图的含义 依赖图的⼊入⼝口是 entry 对于⾮非代码⽐比如图⽚片、字体依赖也会 不不断加⼊入到依赖图中 Entry 的⽤用法 module.exports = { entry: './path/to/my/entry/file.js' }; 单⼊入⼝口：entry js: 构建输出的⽂文件 什什么是⽂文件指纹？ 打包后输出的⽂文件名的后缀 ⽂文件指纹如何⽣生成 Hash：和整个项⽬目的构建相关，只要项⽬目⽂文件有修改，整个项⽬目构建的 hash 值就会更更改 Chunkhash：和 webpack 打包的 chunk 有关，不不同的 entry 会⽣生成不不同的 chunkhash 值 Contenthash：根据⽂文件内容来定义 hash ，⽂文件内容不不变，则 use: [{ loader: 'file-loader’, + options: { + name: 'img/[name][hash:8].[ext] ' + } }] } ] } }; 代码压缩 HTML 压缩 CSS 压缩 JS 压缩 view-source:https://now.qq.com/pcweb/index.html JS ⽂文件的压缩 内置了了 uglifyjs-webpack-plugin

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 后者 直接创建