# 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数组里的左后一项，不然不生效】