这是我参与「第四届青训营 」笔记创作活动的第12天
为什么要学习Webpack
- 理解前端‘工程化’概念、目标、工具
- 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
什么是Webpack
-
可以手动管理这些资源，但存在一些问题：
- 依赖手工，比如有50个JS文件操作，过程繁琐
- 当代码文件之间有依赖的时候，就得严格按照依赖顺序书写
- 开发与生产环境一致，难以接入TS或JS新特性
- 比较难接入Less、Sass等工具
- JS、图片、CSS资源管理模型不一致
-
Webpack本质上是一种前端资源编译、打包工具。
-
具体：
- 将图片、ts等非标准的js文件编译成js兼容的文件
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理css、图片等资源文件
- 支持HMR+开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
- ...
使用 Webpack
模块化 + 一致性
- 多个文件资源合并成一个，减少 http 请求数
- 支持模块化开发
- 支持高级 JS 特性
- 支持 TypeScript、CoffeeScript 方言
- 统一图片、CSS、字体等其他资源的处理模型
流程类配置
配置总览
使用频率：
- entry/output
- module/plugins
- mode
- watch/devServer/devtool
