这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
重点内容：
- 什么是Webpack
- 使用Webpack
- Loader
- 插件
详细知识点：
什么是Webpack
Webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。
- 入口处理：从
entry文件开始，启动编译流程 - 依赖解析：从
entry文件开始，根据requireorimport等语句找到依赖资源 - 资源解析：根据
module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容 - 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器允许的JS文件 递归调用2、3知道所有资源处理完
特点：模块化，一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性，Typescript、CoffeeScript方言
- 统一图片、CSS、字体等其他资源的处理模型
Webpack 优点：
- 代码拆分 — 形成项目依赖树，每个依赖都可拆分成一个模块，进行按需加载
- Loader – webpack核心模块之一，主要处理各类型文件编译转换webpack处理模块，babel语法转换
- 智能解析 – 对CommonJS,AMD，CMD等支持性很好
- Plugin(插件系统) – 强大的插件系统，可实现对代码压缩，分包chunk，模块热替换等，自定义模块，图片base64等，文档非常全面，自动化工作都有直接的解决方案
- 快速高效 – 开发配置可以选择不同环境的配置模式，可选择的打包文件，使用异步 I/O 和多级缓存提高运行效率
- 功能全面 — 最主流的前端模块打包工具，社区全面
Webpack 劣势：
- 配置复杂
- 不分包bundele.js体积庞大
- 只能用于采用模块化开发的项目
- 打包慢
- ES模块除Module外全用babel转换，但是一部分ES2015 语法的 firefox 与 chrome 浏览器中能直接跑的代码，无法用webpack 编译
使用Webpack
流程类
作用于流程中某个或若干个环节，直接影响打包效果的配置项
输入：entry; context
模块解析：resolve; externals
模块转译：module
后处理：optimization;mode;target
工具类
主流程之外，提供更多工程化能力的配置项
输入：entry; context
模块处理：module; resolve; externals
后处理：optimization;mode;target
输出：output
Loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。所以如果我们需要在应用中添加css文件，就需要使用到css-loader和style-loader，他们做两件不同的事情，css-loader会遍历 CSS 文件，然后找到url()表达式然后处理他们，style-loader会把原来的CSS代码插入页面中的一个style标签中。
- less-loader能实现less到css的转换。
- css-loader能将CSS包装成类似module.exports =
${css}的内容，包装后符合JS的语法 - style-loader能将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
安装Loader：npm add -D css-loader style-loader less-loader
添加module处理css文件
module.exports = {
module:{
rules: [
{
test: /\.less$/i,
use: [
"style-loader",
"css-loader",
"less-loader",
],
},
],
},
};
Loader特点：
- 链式执行
- 支持异步执行
- 分normal，pitch两种模式
插件
- 时机：编译过程的特定节点，webpack会以钩子形式通知插件刺客正在发生什么事情
- 上下文：通过tapable提供的回调机制，以参数方式传递上下文信息
- 交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变
