0 为什么要学Webpack
- 理解前端“工程化”概念、工具、目标
- 团队中总需要几个人熟悉Webpack
- 高阶前端必经之路
1 什么是Webpack
1.1 前端项目的资源
-
手动管理这些资源
- 依赖手工，比如有50个js文件...操作，过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致，难以接入TS或JS新特性
- 比较难接入Less、Sass等工具
- JS、图片、CSS资源管理模型不一致
-
工程化工具的出现，诞生了“前端工程”这一概念
- Webpack本质上是一种前端资源编译、打包工具
- 支持Babel、Esslint、TSS、Less
- 模块化处理css、图片等资源文件
2 使用Webpack ———— 实例
- 安装
npm i -d webpack webpack-cli
- 编辑配置文件
const path = require('path')
module.exports = {
entry: './src/index',
mode: "development",
devtool: false,
output: {
filename: '[name].js',
path: path.join(__dirname, './dist')
}
}
环境配置：
- 运行打包
在目录文件下运行
npx webpack
结果：
目标目录生成目标文件：
核心流程
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript、CoffeeScript方言
- 统一图片、CSS、字体等其它资源的处理模型
- Etc...
webpack 流程类配置
至少用到entry和output两个字段
各webpack实例
1. css加载
使用了Loader： css-loader 和 style-loader
2. Bable的使用
高版本的代码 ->> 低版本代码
3. HTML的打包使用
自动打包生成html文件
webpack工具线
hmr（热部署）
tree-shaking
4 认识Loader：链式调用
常用Loader：
5 理解插件
- 略
