这是我参与「第五届青训营 」笔记创作活动的第16天。活动详情：# 伴学笔记创作活动来袭 ｜ 第五届字节跳动青训营
有关 Webpack 的讲解，除了使用与配置之外，还有重要的知识则是 Webpack 的扩展方式，在对基础的概念、本质、使用讲解完成后，本节课主要解读 Webpack 的扩展方式之一 - Loader 。
理解 Loader
- Webpack 内容识别 - 只认识 JS 为了处理非标准JS资源设计出资源翻译模块Loader，用于将资源翻译为标准JS
路径：
- src文件下：a.less|b.less|index.js index.js中添加文件:import styles from './a.less';
- webpack.config.js 添加配置
- 使用 Loader
安装: npm add -D css-loader style-loader less-loader
添加module处理css文件:
module.exports={
module:{
rules:[
{
test:/\.less$/i,
use:[
"stylr-loader",//将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
"css-loader",//将css包装成类似module.exports="${css}"的内容，包装后的内容符合JavaScript语法
"less-loader",//实现less=>css转换
],
},
],
},
};
- 认识 Loader ：链式调用与其他特性
- 链式执行
- 支持异步执行
- 分normal、pitch（一旦有输出则停止运行后续程序）两种模式
- Loader 编写 loader.js:（导出一个默认函数）
module.exports=function(source,sourceMap?,data?){
return source;
}
eslint-loader/index.js
import getOptions from './getOptions';
import Linter from './Linter';
import cacheLoader from './cacheLoader';
export default function loader(content,map){
const options=getOptions(this);
const linter=new Linter(this,options);
this.cacheable();
if(options.cache){
cacheLoader(linter,content,map);
return;
}
linter.printOutput(linter.lint(content));
this.callback(null,content,map);
}
- 常见 Loader
- JavaScript
- CSS
- HTML
- Assets
理解插件
- 插件架构精髓：对扩展开放，对修改封闭
- 步骤：安装对应插件 import new创建插件的实例
插件围绕钩子展开 钩子的核心信息：
- 时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情
- 上下文：通过tapable提供的回调机制，以参数方式传递上下文信息
- 交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变
