注意：
1：本次演示使用webpack@4 和webpack-cli@4， 如果webpack是@5，那么会html资源的时候会出现TypeError: Cannot read property 'createSnapshot' of undefined；如果还有其他的异常，请耐心百度，不要急躁放弃；
2：资源下载使用 npm， 文中所需的loader，都是使用命令：npm i xxx -D 下载
一，webpack5个核心概念
1.1 Entry： 指示webpack以某文件为起点开始打包，分析并构建内部依赖图
1.2 Output：指示webpack打包后的资源bundles输出设置，其中包括生成的文件命名和文件路径
1.3 Loader：处理非js文件【webpack能理解js/json资源】
1.4 Plugins：插件用于范围更为广阔的任务，如优化和压缩
1.5 Mode：设置打包环境，'development' or ‘production’，本地环境较为简单，生产环境更为复杂，比如压缩js代码；
二， webpack简单体验
2.1：构建项目流程
---npm init
---npm i webpack webpack-cli -g //全局安装
---npm i webpack webpack-cli -D //开发依赖
---项目内创建src，src内创建webpack入口文件index.js 和 index.html
---根目录下创建webpack.config.js，用于写webpack配置webpack.cong
2.2：打包命令
a)，webpack ./src/index.js -o ./dist/main.js --mode=development
b)，webpack
这里不要纠结哪种命令可行与否，只要能完成初始打包即可，本块构建可参考自行百度
webpack.config.js
三， webpack打包css资源
---需要的loader有：css-loader和style-loader;3.1 在src中创建index.css文件【其中添加css样式，将背景变为黑色，高度设置为100%】，在index.html中引入打包后的js文件，即dist下的main.js；
3.2 在入口文件index.js中引入index.css, 使用 import './index.css'
3.3 在module中设置css资源loader配置：
css资源
终端运行webapck打包成功后，运行html，将得到背景为黑色的效果；可通过浏览器Elements调试，发现网页head中多了一个style标签；
注意这里的use数组中的loader顺序，是自后向前的；而解析是默认采用commonjs
3.4 打包less资源文件
---需要less / less-loader，步骤同上，需要配置不同的loader；
less-loader配置，需要下载！！！
运行命令后，切记运行打包命令！ 效果出现！记得less里面写些玩意！
四，webpack打包html资源
---使用过vue-cli的朋友知道，单页面应用打包后dist文件夹会有一个.html文件，之前我们使用的是src的代码编辑文件夹内的html文件，实际生产环境的使用是使用的dist中的
---而且，之前我们index.html文件内的js是我们手动引用的，这里完全不是自动化打包；
---so.... 使用plugins插件配置4.1 删除src下的html文件内的js文件引用；
4.2 使用 html-webapck-plugin插件；
---引入插件 在配置中 添加const HtmlWebpackPlugin = require('html-webpack-plugin');
插件配置，配置之前要引入哦
同样，打包后，会发现dist下有html文件，这是运行该html，将会得到我们的效果；
值得注意的是，loader过程是 下载->配置使用；而plugin过程则是：下载->引入->配置使用
五，webpack配置图片资源
---使用loader处理，需要下载包 url-loader / file-loader5.1 将src中index.html添加div，背景使用css中添加图片作为实验背景，图片找大中小个几张，这里要做实验；
5.2 配置loader
loader配置
关于base64使用的优缺点：
---网页上的图片资源如果采用http形式的url的话都会额外发送一次请求，网页发送的http请求次数越多，会造成页面加载速度越慢。而采用Base64格式的编码，将图片转化为字符串后，图片文件会随着html元素一并加载，这样就可以减少http请求的次数，对于网页优化是一种比较好的手段；
---大量的base64会使渲染流程卡顿；大图使用base64体积将变很大，一次请求时间延长；而且还有兼容问题5.3 打包后会发现小于8kb的变成了base64，可在打包后的main.js中寻找，而两张大于8kb则在dist里面生成了2个图；打开html文件，则会看到图了；
5.4 上面的图片都是css/less中的样式，当其他情况下呢？是否还有其他可配置项呢？
--- 代码编辑区的index.html中添加img标签，打包，运行 ==》 没有出现图片。。
--- 下载 html-loader
配置html-loader
打包后，打开dist下的html文件，这里你会发现，img标签里可能是个非正常值；我这里说的是可能，因为我看到某些版本下，是非正常的，如果非正常，则需要配置url-loader的options，添加配置 eModule: false【关闭url-loader的es6模块化】，其原因是url-loader默认es6模块化解析，而html-loader引用的是commonjs；
5.5 其他：将生成的图片名字长度减少 使用 name: '[hash:10].[ext]'
完整图片配置
后面将继续介绍webpack的相关知识，有错误或改进请感谢指出
网友评论