组件化 内容综述 基础篇 P1-P3 进阶篇 P4-P5 原理理篇 P6-P7 实战篇 P8 webpack 的基本概念和⽇日常 开发的实⽤用技巧 以⼯工程化的⽅方式组织 webpack 构 建配置，和 webpack 打包优化 详细剖析 webpack 打包原理理 和插件、Loader 的实现 从实际 Web 商城项⽬目出发， 讲解 webpack 实际使⽤用 基础篇：webpack

(source code) 会导致什什么问题？ 运⾏行行代码时创建的函数作⽤用域变多，内存开销变⼤大 ⼤大量量作⽤用域包裹代码，导致体积增⼤大（模块越多越明显） 模块转换分析 结论： ·被 webpack 转换后的模块会带上⼀一层包裹 ·import 会被转换成 __webpack_require 模块 模块初始化函数 进⼀一步分析 webpack 的模块机制 分析： · 打包出来的是⼀一个 (匿匿名闭包) · modules 是⼀一个数组，每⼀一项是⼀一个模块初始化函数 · 通过 WEBPACK_REQUIRE_METHOD(0) 启动程序 · __webpack_require ⽤用来加载模块，返回 module.exports scope hoisting 原理理 原理理：将所有模块的代码按照引⽤用顺序放在⼀一个函数作⽤用域⾥里里，然后适当的重命名⼀一 些变量量以防⽌止变量量名冲突 些变量量以防⽌止变量量名冲突 对⽐比: 通过 scope hoisting 可以减少函数声明代码和内存开销 scope hoisting 使⽤用 必须是 ES6 语法，CJS 不不⽀支持 webpack mode 为 production 默认开启 module.exports = { entry: { app: './src/app.js', search: './src/search.js' }, output:

03 一个最简单的 loader 代码结构 module.exports = function(source) { return source; }; 定义：loader 只是一个导出为函数的 JavaScript 模块 多 Loader 时的执行顺序 多个 Loader 串行执行 顺序从后到前 module.exports = { entry: './src/index 'style-loader', + 'css-loader', + ' less-loader' + ] + } + ] + } }; 函数组合的两种情况 Unix 中的 pipline Compose(webpack采取的是这种) compose = (f, g) => (...args) => f(g(...args)); 通过一个例子验证 // 基础上下文之外的额外 loader 上下文 readResource: fs.readFile.bind(fs) // 读取资源的函数 }, function(err, result) { // err: Error? // result.result: Buffer | String }) 开发一个 raw-loader

核⼼心概念之 Loaders webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文 件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。 本身是一个函数，接受源文件作为参数，返回转换的结果。 常⻅见的 Loaders 有哪些？ Loaders 的⽤用法 const path = require('path'); module.exports 核⼼心概念之 Mode Mode ⽤用来指定当前的构建环境是：production、development 还是 none 设置 mode 可以使⽤用 webpack 内置的函数，默认值为 production Mode 的内置函数功能 资源解析：解析 ES6 const path = require('path'); module.exports = { entry: './src/index

//异步串行流水钩子 } = require("tapable"); Tapable 是一个类似于 Node.js 的 EventEmitter 的库, 主要是控制钩子函数的发布 与订阅,控制着 webpack 的插件系统。 Tapable库暴露了很多 Hook（钩子）类，为插件提供挂载的钩子 Tapable hooks 类型 Tapable 的使用 -new Hook https://esprima.org/demo/parse.html 复习一下 webpack 的模块机制 · 打包出来的是一个 IIFE (匿名闭包) · modules 是一个数组，每一项是一个模块初始化函数 · 通过 WEBPACK_REQUIRE_METHOD(0) 启动程序 · __webpack_require 用来加载模块，返回 module.exports 动手实现一个简易的 webpack

2%) gulp 入门指南 - 16 - 本文档使用 看云 构建 使用 gulp 编译 LESS Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能， 让 CSS 更易维护。 安装 npm install gulp-less 基本用法 你可以 下载所有示例代码 - 或在线查看代码 // 获取 gulp var gulp = require('gulp') search, replace, distExt) watchPath(event, search, replace, distExt) 参数 参数 说明 说明 event gulp.watch 回调函数的 event search 需要被替换的起始字符串 replace 第三个参数是新的的字符串 distExt 扩展名(非必填) 此时编辑 src/js/log.js 文件并保存，命令行会出现消息，表示检测到