1、webpack五大核心概念
一、entry 入口--从哪个文件开始打包
二、output输出文件位置--指定output目录
三、loader -- webpack本身只能处理js文件，其他文件的解析需要loader参与
四、plugin -- 扩展功能
五、mode -- 两种模式 先development 后production
2、配置文件 webpack.config.js
执行打包命令： npx webpack
开发模式介绍
1、编译代码，增加配置处理图片资源、html资源等 2、代码质量检查、树立代码规范
3、处理样式资源（css、less、sass、styl）(rules)
css：css-loader style-loader
less:less-loader
sass:sass-loader sass
styl:stylus-loader
4、处理图片资源 asset
针对小图片 进行base64编码，[hash:10]限制图片哈希名长度
5、处理字体图标资源
...
6、Eslint
安装：Eslint-webpack-plugin 、 eslint 使用： 1、引入 require + new EslintPlugin
7、babel 兼容新旧浏览器
babel-loader 配置文件：babel.config.js / package.json 具体配置：
8、提取css文件为单独文件 防止浏览器加载慢 出现闪屏
（加载顺序：先js 后css） -> 生成单独css 采用link引入
插件：MincssExtractPlugin 使用： 1、引入require 2、所有style-loader替换为MinCssExrtactPlugin.loader 3、new MinCssExrtactPlugin调用
4、css压缩
CssMinimizerWebpackPlugin 1、安装 2、调用new CssMinimizerWebpackPlugin
