1.Webpack简介以及体验
eg步骤：
（1）首先要用npm所以要有packge.json文件，先在vscode终端执行该命令
（2）
（3）打包准备工作
2.Webpack修改入口和出口
执行该命令
这样就能打包出该代码对应的文件夹了，但是我们发现上一级的main.js还在，这时候就可以添加如下图所示的代码就可以解决，但是只在webpack5.2.0的版本才生效，如果不生效就去官网查看
3.案例-用户登录-长度判断
js代码
编写完成，执行webpack自定义命令 run build 后打包生成dist文件夹，里面有打包的对应index.js文件，然后在将login.html文件拖入dist文件夹中，在login.html文件夹中引入该文件夹即可启动该网页。
运行成功结果
4.Webpack自动生成html文件
上面的打包后还要把login.html手动拖进去就很麻烦，所以有没有更加自动化的操作
要下载插件引入插件
阅读文档发现只有说自动生成，没有说怎么自动指定文件到文件夹里，这里点击下面这个
发现这两个可以
往下翻阅有使用说明：
接下来说明步骤：
1.下包
5.Webpack打包css代码
步骤：
把css引入到js文件中，反正加载器会解析
在终端先引入包
下面是引入css后的文件展示，可以看看
运行结果如下：有样式了，但是该文件还用了bootstrap框架，那这里还可以继续引入bootstrap中的css来美观样式。
然后重新打包输出
结果如下：
6.优化-提取css代码
就是单独把css提取出来文件。
步骤：
先添加对应的webpack代码
然后执行打包命令：
这里css有单独文件，index.html文件也引入了该css文件
7.优化-压缩过程
这里发现css里面自己写的代码没有进行压缩
步骤：
还是熟悉的配方，先加载包
然后在webpack添加代码
然后再执行重新打包命令
发现自己写的代码也被重新压缩
js代码也没受到影响
运行结果也没问题
8.Webpack打包less代码
步骤：
执行命令得到下面结果：
运行结果也正确
9.Webpack打包图片
运行命令
小于8k的图片被打包进index.js里了
运行结果：
10.案例-用户登录-功能完成
11.Webpack搭建开发环境
就是改完每次都要执行下打包命令很麻烦。
步骤：
弹出了浏览器，但是这浏览器显示的是public文件下的目录
如何解决呢？
但是我们又会发现没有样式
所以我们应该访问这个
因为打开浏览器会默认以public作为根目录，所以我们可以创一个index.html，里面只有一个跳转需要的地址即可打开就显示登入页面。
12.Webpack打包模式
步骤：
运行命令
可以看出项目自动弹出正常运行，然后在执行下命令
发现代码是压缩了的
然后改成development
执行命令
可发现代码上面还有解释
小插曲：想要把main。css放入login文件夹中，添加如下代码：
这个模块里面只能传相对路径
13.Webpack打包模式应用
方案2：
步骤：
下载软件包
修改代码
14.前端-注入环境变量
添加插件代码：
15.Webpack开发环境调错
添加选项
准确定位：
上面是设置了开发者模式才能看的，我们打包后文件启动就不会精准定位该位置了。
16.Webpack解析别名
步骤：
17.优化-生产模式下使用CDN
这里有免费的cdn地址
18.Webpack多页面打包
19.案例-打包发布文章页面
配置
执行打包命令即可
20.优化-分割公共代码
执行打包命令即可。
说白了就是把公共代码抽出来复用。