这是我参与「第五届青训营 」笔记创作活动的第11天。
课程重点
- Webpack 内容识别 - 只认识 JS
- 使用 Loader
- 认识 Loader ：链式调用与其他特性
- 常见 Loader
- 插件定义解析
- 插件设计优势
- Webpack 学习方法推荐
详细内容
认识 loader
loader的核心功能,把非JS的资源转化为JS资源,因为 webpack 自认识JS
使用 loader
loader 特性
链式调用
- less-loader: 实现 less->css 的转换
- css-loader: 将 css 包装成类似 module.exports = "${css}" 的内容, 包装后的内容符合 js 语法
- style-loader: 将 css 模块包进 require 语句, 并在运行时调用 injectStyle 等 函数将内容注入页面的 style 标签
其他特性
常见 loader
理解插件
插件是什么? 为什么这么设计 对于一个开源项目来说，新人想要参与贡献,需要了解整个流程细节的话，上手成本高; 功能迭代成本高,牵一发动全身; 功能僵化，作为开源项目而言缺乏成长性。而用插件的话，只做最核心的部分，开发了一系列的扩展方式，用项目开发的扩展方式，改项目的内容，不需要改项目的源码。 插件架构精髓: 对扩展开放，对修改封闭。 webpack 本身的很多功能也是基于插件实现的。
使用插件
安装依赖，创建实例。
插件设计
“钩子”：一个事件，webpack 走到那一个过程的时候 触发一个事件。
thisCompilation就是一个钩子
钩子的核心信息：
