一、webpack五个核心概念
1、入口(Entry)指示 webpack 以哪个文件为入口起点开始打包
2、输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
3、Loader 让 webpack 能够去处理那些非 JavaScript 文件 (webpack 自身只理解 JavaScript、JSON) 执行顺序：从右到左，从下到上 依次执行
4、插件(Plugins)可以用于执行范围更广的任务。插件的范围包括， 从打包优化和压缩， 一直到重新定义环境中的变量等。
5、
二、打包资源
1、打包css资源
使用 css-loader less-loader style-loader 这几个loader
2、打包html资源
使用 html-webpack-plugin这个插件
功能:默认会创建一个空的 HTML，自动引入打包输出的所有资源(JS/CSS)
3、打包图片资源
html-loader url-loader file-loader
（1）html-loader
处理html中img资源
（2）url-loader用法简介
1.文件大小小于limit参数，url-loader将会把文件转为DataURL；
2.文件大小大于limit，url-loader会调用file-loader进行处理，
参数也会直接传给file-loader。因此我们只需要安装url-loader即可
4、打包其他的资源（配置的时候排除这三者即可）
三、devServer
四、开发环境基本配置
1.创建文件
2. 修改配置文件
五、生产环境基本配置
1、提取 css 成单独文件
下载插件 npm install --save-dev mini-css-extract-plugin
2、修改配置文件
3、css 兼容性处理
下载 loader npm install --save-dev postcss-loader postcss-preset-env
4、修改配置文件
5、修改 package.json
6、压缩css
下载安装包 npm install --save-dev optimize-css-assets-webpack-plugin
7、修改配置文件
8、js 语法检查
下载安装包 npm install --save-dev eslint-loader
eslint eslint-config-airbnb-base eslint-plugin-import
9、修改配置文件
10、js 兼容性处理
下载安装包 npm install --save-dev babel-loader
@babel/core @babel/preset-env @babel/polyfill core-js
11、修改配置文件
12、js 压缩（生产环境下会自动压缩js代码）
13、HTML 压缩（下面配置minify）
14最终生产环境配置
六、webpack优化
