Webpack知识体系（2） ｜ 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第11天

理解Loader

• 核心功能: 在Webpack将非标准JavaScript资源翻译成标准JavaScript
• 特点
  • 链式调用
    • 以处理.less文件为例
      • less-loader: less -> css
      • css-loader: css -> js模块
        • 将包装成类似module.exports = `${css}`，使其符合JavaScript语法
      • style-loader: js模块 -> 注入页面style标签
        • 将CSS模块包进require语句
        • 在运行时调用injectStyle等函数将内容注入到页面的style标签
      • 在执行过程中加入debugger可以添加断点，执行ndb npx webpack调试可查看转换过程
  • 支持异步执行
  • 分normal pitch两种模式
    • 在pitch阶段从loaders数组第一个往后执行
    • 在normal阶段从loaders数组最后一个往前执行
    • 在pitch的任意一个阶段有返回值即停止后面的执行
• 如何编写loader
  • 以eslint-loader为例
    • eslint 代码风格检查工具

// eslint-loader/src/index.js
// content 即为输入内容
export default function loader(content, map){
	const options = getOptions(this);
	const linter = new Linter(this, options);
	this.cacheable();
	// return early if cached
	if (options.cache){
		cacheLoader(linter, content, map);
		return;
	}
	
	linter.printOutput(linter, lint(content));
	this.callback(null, content, map);
}

• 通用loader格式

// @params:
	// source 输入内容
	// 其他参数可选，可不声明
module.exports = function(source, sourceMap?, data?){
	// 执行转换
	...
	// 返回处理结果
	return ...
}

• 建议掌握功能和配置方法的常见loader
  • JavaScript
    • babel-loader
    • eslint-loader
    • ts-loader
    • vue-loader
    • angular2-template-loader
  • CSS
    • css-loader
    • style-loader
    • less-loader
    • sass-loader
    • stylus-loader
    • postcss-loader
  • HTML
    • html-loader
    • pug-loader
    • posthtml-loader
  • Assets
    • file-loader
    • val-loader
    • url-loader
    • json5-loader

理解插件

• 设计目的: 提升应用的扩展性，降低开源项目的参与门槛
• 构造: 插件围绕hooks展开
  • hooks可以理解为事件
  • hooks有很多，大概有239个
  • hooks的核心信息
    • 时机：编译过程的特定节点，通知插件此刻正在发生的事情
    • 上下文：通过tapable提供的回调机制，以参数方式传递上下文信息
    • 交互：在上下文参数对象中附带了很多插件可以使用的存在副作用的交互接口

学习方法

• 入门应用：能用
  • 理解打包流程
  • 熟练掌握常用配置项、loader、插件等使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的Webpack环境
  • 掌握常见脚手架工具的用法，如：Vue-cli create-react-app、``@angular/cli`
• 进阶
  • 理解Loader、Plugin机制，能够自行开发Webpack组件
  • 理解常见性能优化手段并能用于解决实际问题
  • 理解前端工程化概念与生态现状
• 大师
  • 阅读源码
  • 理解Webpack编译打包原理
  • 深度参与Webpack建设