今天是我参加第四届字节跳动青训营笔记活动的第五天

什么是webpack

本质上一种前端资源编译，打包工具

-多分资源打包成一个bundle
-支持Babel，eslint，ts。less，sass等
-支持模块化处理css，图片等资源文件
-支持hmr+开发服务器
-支持持续监听和构建 -支持代码分离
-.....

那，怎么使用webpack

基本围绕配置展开，这些配置项大致可划分两类：
1.流程类：作用域流程中的某个或若干个环节，直接影响打包效果的配置项

2.工具类：除主流程之外，提供更多工程化能力的配置项

webpack————工具线

Tree-Shaking 本质上就是删除没有使用的代码(Dead Code)

开启tree-shaking
mode:"production"
optimization.usedExports:true

webpack处理语言

webpack只能处理js脚本，为了适应其他超集语言如TypeScript或CoffeeScript，会有一个loader去处理这些超集语言装换成JS代码，再由webpack执行
使用时需要安装对应的loader依赖

loader的其他特性

特点：
-链式执行
-支持异步执行
-分normal和pitch两种模式

理解插件

首先：插件围绕钩子展开 class SomePlugin { apply(compiler){ compiler.hooks.thisCompilatation.tap('SomePlugin',(complilation)=>{ }) } } 钩子的核心信息：
1.时机：编译过程的节点，webpack会以钩子的形式通知插件在做什么
2.上下文：通过tapable提供的回调机制，用参数传递上下文信息
3.交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改版

webpack的学习方法

入门

-理解打包流程
-熟练掌握配置项，loader，插件的使用方法，能灵活搭建webpack环境
-掌握常见的脚手架工具（Vue-cile，create-react-app，@angular/cli）

进阶

-理解loader，插件机制，能够自行开发webpack组件
-理解常见性能优化的手段，用于解决实际问题
-理解前端工程化概念和生态现状

大师级

-阅读源码，理解webpack编译和打包原理，甚至参与共建