# webpack
## 定义
前端
自动化打包工具
##
功能
编译es6，压缩
图片，压缩
代码，
代码热更新
## 环境准备
必须安装nodejs
## 组成部分
### mode模式
两种：development 开发环境
production 生产环境
### entry入口
指定webpack运行时，执行的第
一个文件
### output出口
指定webpack打包时路径和
文件名
### devServer 开发服务
开启本地服务，让
代码热更新，他就是development环境
安装：npm i webpack-dev-server
yarn add webpack-dev-server
### module 模块
用来处理前端资源，比如
图片，样式，脚本，字体等
默认webpack只能处理js，其他的就需要module来处理
#### loader 装载机
-处理CSS：style-loader
css-loader
-处理
图片：file-loader url-loader 如果
图片小于1KB则编译成base64数据
-处理字体：file-loader
##### 执行顺序
自上而下，从左到右
### plugins
插件
对webpack没有的
功能的扩展
-html-webpack-plugin
生成模板
页面
-clean-webpack-plugin 清除冗余
文件【必须写在plugins数组里的左后一项，不然不生效】
