什么是webpack
webpack诞生的原因
- 前端资源有很多类型的文件,手动管理耗时耗力
- 难以接入TS/JS新特性,以及SASS/LESS等新工具
webpack的功能
- 多份资源文件打包成一个bundle,支持模块化处理css、图片等资源
- 支持TS、SASS、LESS
- ……
使用
配置分类
流程类
webpack 处理流程
入口出口 entry output
处理不同类型的文件 module plugin
loader
内容转换器 —— 将各式各样的资源转化为标准 JavaScript 内容格式
1 CSS css-loader style-loader
2 js babel-loader
preset 规则集(提前的一些配置)
3 html HtmlWebpackPlugin
自动生成插入好js css 的html
工具类
HMR 热模块替换(及时更新)
devServer hot:true
tree-shaking 去除没有用到的代码
- mode:"production"
- usedExports:true