webpack相关

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