这是我参与「第四届青训营 」笔记创作活动的第13天
- 某个程度上可以成为个人的核心竞争力
- 高阶前端必经之路
webpack由来
手动管理资源时，缺点：
-
依赖手工——>如引入多个script标签——>过程繁琐
-
代码文件之间有依赖——>需严格按依赖顺序书写
-
开发与生产环境一致——>难以接入TS或JS新特性
-
比较难接入Less、Sass等工具
-
JS、图片、CSS资源管理模型不一致
——>出现许多工程化工具
webpack本质上是一种前端资源编译、打包工具
使用webpack
简单实例
- 安装依赖
npm i -D webpack webpack-cli
- 配置文件
module.exports={
entry:'main.js',
output:{
filename:"[name].js",
path:path_join(__dirname,"./dist"),
},
module:{
rules:[{
test:/.less$/i,
use:['style_loader','css-loader','less-loader']
}]
}
}
- 执行编译命令
npx webpack
核心流程
入口处理——>依赖解析——>资源解析——>资源合并打包
模块化+一致性
使用方法——>围绕“配置”展开
配置总览
流程类配置
作用于流程中某个or若干个环节，直接影响打包效果的配置项
工具类配置
主流程之外，提供更多工程化能力的配置项
实例
处理js文件
接入babel
babel——>js代码转译的工具
\
处理css文件
处理less文件
自动生成html
工具线
HMR 模块热替换
tree-shaking 树摇
删除一些没有用到的代码 （模块导出，但未被其他模块使用）
开启
其他工具：
- 缓存
- sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包
理解loader
起因：webpack只认识js代码
内容的转化——>将非标准JS资源转换为标准JS资源
特点
链式调用
支持异步执行
分normal、pitch两种模式
如何编写loader
常见loader
理解插件
——> 插件：对拓展开放，对修改封闭
使用实例
理解
插件围绕钩子展开
