关于Webpack
什么是Webpack
- 本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个 Bundle
- 支持 BabelEslint、TS、Coffescript、Less、
- Sass
- 支持模块化处理 css、图片 等资源文件
- 支持 HMR ＋ 开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持 Tree-shaking
- 支持 Sourcemap
核心流程
-
入口处理 从‘entrv’ 文件开始，启动编译流程
-
依赖解析 从 entry 文件开始，根据 require or import等语句找到依赖资源
-
资源解析 根据 module’配置，调用资源转移器，将png css 等非标准JS资源转译为JS 内容
-
资源合井打包 将转译后的资源内容合并打包为可直接在浏览器运行的 JS 文件
模块化＋一致性
- 多个文件资源合并成一个，减少 http请求数
- 支持模块化开发
- 支持高级JS 特性
- 支持 Tvpescript、Coffeescript 方言
- 统一图片、CSS、字体 等其它资源的处理模型
- Etc..
使用 Webpack
关于 webpack 的使用方法，基本都围绕“配置’展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个 or 若干个环节直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
流程类配置
输入
- entry
- context 模块解析
- resolve
- "externals" 模块转译
- module 后处理：
- optimization
- mode
- target
配置总览
- entry/output
- 'module/plugins
- mode"
- watch/devServer/devtool 处理 CSS
- 安装 Loader
npm add -D css-loader style-loader
2. 添加‘module’处理 css 文件
接入 Babel
- 安装依赖
npm i -D @babel/core @babel/preset-env babel-loader
- 声明产物出口 ‘output
3.执行‘npx webpack
生成 HTML
- 安装依赖
npm i -D html-webpack-plugin
-
声明产物出口 ‘output
-
执行‘npx webpack'
HMR
热替换
Tree-Shaking
删除无用代码
开启 tree-shaking
- mode:"production"
- optimization.usedExports: true"
其他工具
- 缓存
- Sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包 使用 Loader
- 安装 Loader
npm add -D css-loader style-loader less-loader
- 添加‘module’ 处理 css 文件
- less-loader ：实现less =＞css 的转换
- css-loader ：将CSS 包装成类似 module.exports ="${css) 的内容，包装后的内容符合 JavaScript 语法
- style-loader ：将css 模块包进require 语句，并在运行时调用 injectstyle 等函数将内容注入到页面的 stvle 标签
其它特性
特点
- 链式执行
- 支持异步执行
- 分 normal、pitch 两种模式
理解插件
首先：插件围绕 钩子、展开 钩子的核心信息：
- 时机：编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情；
- 上下文：通过 tapable 提供的回调机制，以参数方式传递上下文信息；
- 交互：在上下文参数对象中附带了很多存在side effect 的交互接口，插件可以通过这些接口改变
学习方法
- 入门应用
- 理解打包流程
- 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成 Vue 、React、Babel. Eslint、Less.Sass、图片处理等工具的 Webpack 环境掌握常见脚手架工具的用法，例如： Vue-cli、create -react-app. @angular/cli
- 进阶
- 理解 Loader、Plugin 机制，能够自行开发 Webpack组件
- 理解常见性能优化手段，并能用于解决实际问题理解前端工程化橛念与生态现状
- 大师级 闭读源码，理解 Webpack 编译、打包原理，甚至能够参与共建
