基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 2.0 - > 16.3.0 -> 16.3.1 软件的版本通常由三位组成，形如： X.Y.Z 在发布重要版本时，可以发布alpha, rc 等先行版本 alpha和rc等修饰版本的关键字后面可 以带上次数和meta信息 遵守 semver 规范的优势 优势： ·避免出现循环依赖 ·依赖冲突减少 语义化版本（Semantic Versioning）规范格式 次版本号：当你做了向下兼容的功能性新增，

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 = options; } apply() { console.log("apply", this.options); } }; 插件的错误处理 通过 compilation 对象的 warnings 和 errors 接收 compilation.warnings.push("warning"); compilation.errors.push("error"); 参数校验阶段可以直接 Message”) 通过 Compilation 进行文件写入 Compilation 上的 assets 可以用于文件写入 ·可以将 zip 资源包设置到 compilation.assets 对象上 文件写入需要使用 webpack-sources (https://www.npmjs.com/package/webpack- sources) const { RawSource } =

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 options: 优化参数 ·Stats options: 统计参数 ·options: 通用参数(帮助命令、版本信息等) webpack-cli 执行的结果 最终会根据配置参数实例化 webpack 对象，然后执行构建流程 webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数 options Webpack 的本质 Webpack可以将其理解是一种基于事件流的编程范例，一系列的插件运行。 extends Tapable { // ... } class Compilation extends Tapable { // ... } 核心对象 Compiler 继承 Tapable 核心对象 Compilation 继承 Tapable Tapable 是什么？ const { SyncHook,

腾讯IVWEB 程柳柳锋 扫码试看/订阅 《玩转 webpack》 基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 的⽤用法 module.exports = { entry: './path/to/my/entry/file.js' }; 单⼊入⼝口：entry 是⼀一个字符串串 多⼊入⼝口：entry 是⼀一个对象 module.exports = { entry: { app: './src/app.js', adminApp: './src/adminApp.js' } }; 核⼼心概念之 Output 'css-loader' + ] + } + ] + } }; css-loader ⽤用于加载 .css ⽂文件，并且转换成 commonjs 对象 style-loader 将样式通过