webpack | 青训营

31 阅读1分钟

什么是webpack

webpack诞生的原因

  • 前端资源有很多类型的文件,手动管理耗时耗力
  • 难以接入TS/JS新特性,以及SASS/LESS等新工具

webpack的功能

  • 多份资源文件打包成一个bundle,支持模块化处理css、图片等资源
  • 支持TS、SASS、LESS
  • ……

使用

配置分类

image.png

流程类

webpack 处理流程 image.png

入口出口 entry output

image.png

处理不同类型的文件 module plugin

loader

内容转换器 —— 将各式各样的资源转化为标准 JavaScript 内容格式

如何编写loader

1 CSS css-loader style-loader

image.png

2 js babel-loader

image.png

preset 规则集(提前的一些配置)

babel-preset-env

3 html HtmlWebpackPlugin

自动生成插入好js css 的html

image.png

工具类

HMR 热模块替换(及时更新)

devServer hot:true

tree-shaking 去除没有用到的代码

  • mode:"production"
  • usedExports:true

image.png

watch 持续监听构件的变化,并构建新的

继续学习

深入浅出webpack