这是我参与「第四届青训营 」笔记创作活动的第12天
Webpack 知识体系
1.什么是Webpack
webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、TS等
- 支持模块化处理css、图片等资源
- 支持HMR+开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
2.使用Webpack
示例
1.安装
npm i -D webpack webpack-cli
2.编译配置文件
3.执行编译命令
npx webpack
核心流程
1.入口处理
从‘entry’文件开始,启动编译流程
2.依赖解析
从‘entry’文件开始，根据'require’or ‘import’等语句找到依赖资源
3.资源解析
根据‘module`配置,调用资源转移器，将png、css等非标准JS资源转译为JS内容
4.资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS 特性
- 支持Typescript、CoffeeScript方言
- 统一图片、CSS、字体等其它资源的处理模型
- Etc. . .
使用Webpack
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:
- 流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类:主流程之外，提供更多工程化能力的配置项
处理CSS
1.安装Loader
2.添加module处理css文件
接入Babel
生成HTML
- 工具类:主流程之外，提供更多工程化能力的配置项
HMR
Tree-Shaking
删除没有用到的代码
3.进阶篇:理解 Loader
链式调用
- less-loader :实现less => css的转换
- css-loader:将CSS包装成类似module.exports = "${css]”的内容，包装后的内容符合JavaScript语法
- style-loader : 将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
其他特性
特点：
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
常见Loader
站在使用角度，建议掌握这些常见Loader的功能、配置方法
4.进阶篇:理解插件
插件是什么？为什么要这么设计？
理解插件
使用html-webpack-plugin
module.exports = {
plugins: [
new HTMLWebpackPlugin()
]
}
使用html-webpack-plugin + DefinePlugin
const webpack = require( 'webpack' )
const HtmlwebpackPlugin = require( 'html-webpack-plugin ' )
module.exports = {
entry: "./src/index" ,output: {
filename: " [ name].js"，
path: path.join( __dirname， "./dist" ),
}，
plugins: [
new HtmlWebpackPlugin(),
new webpack.DefinePlugin({
PRODUCTION:JSON.stringify(true),
VERSION:JS0N.stringify ('5fa3b9'),
})
]
};
插件围绕钩子展开
钩子的核心信息:
1.时机:编译过程的特定节点，webpack 会以钩子形式通知插件此刻正在发生什么事情;
2.上下文:通过tapable提供的回调机制,以参数方式传递上下文信息;
3.交互:在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变
5.学习方法
-
入门应用
- 理解打包流程
- 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的 Webpack 环境
- 掌握常见脚手架工具的用法，例如:Vuo-cli、create-react-app、@angular/cli
-
进阶
- 理解Loader、Plugin机制,能够自行开发Webpack组件
- 理解常见性能优化手段,并能用于解决实际问题
- 理解前端工程化概念与生态现状
-
大师级
- 阅读源码,理解Webpack编译、打包原理,甚至能够参与共建
