16.什么是webpack?
压缩：把代码文件的体积缩小
整合：把多个CSS文件、JS文件整合成一个，减少用户浏览器的http请求次数，从而让用户更快访问我们的网页
转译：less、sass转换成css，高版本js降级处理等
时间过程中出现报错，可能是路径问题
如：
检查发现是终端执行位置导致问题，应在src所在文件夹执行
也可以配置合适的webpackage.config.js
const path = require('path');
//配置文件就是一个js文件，通过Node中的模块操作，向外暴露一个配置对象。
module.exports = {
entry: path.join(__dirname, './index.js'),//入口,要使用webpack打包那个文件。
output: {//输出文件的配置
path: path.join(__dirname, './dist'),//指定到那个目录中去
filename: "bundle.js"//指定输出文件的名称
}
}
17.修改 Webpack 打包入口和出口
默认的入口文件：src/index.js
默认的出口文件：dist/main.js
概念 | webpack 中文文档 (docschina.org)
配置文件的代码在node环境中执行，为了保证在任何地方执行都能找到文件，使用绝对路径。
path.resolve和path.join
5.2.0版本的webpack可以清空输出目录后打包生成
18.用户登录 - 长度判断
19.自动生成 html 文件
关于插件：
HtmlWebpackPlugin | webpack 中文文档 (docschina.org)
template
filename
下包（找包）
配置包
如果是写相对路径，会以出口目录作为起点
打包
生成的html文件中js文件引入路径书写
插件源代码会根据filename的路径分析，
去匹配出口路径（output.path）， 这个出口目前来看是指js文件的出口
匹配到后，在该基础（../）拼接output.filename
如果filename路径中不包含出口路径？
一直向上层级匹配检索
建议：打包输出内容（filename）都在出口文件夹下面
可正常运行
20.打包 css 代码
css-loader | webpack 中文文档 (docschina.org)
style-loader | webpack 中文文档 (docschina.org)
加载器从右到左依次使用，所以先是css，后style，顺序不能颠倒
为什么不用变量和from去接收？
—— 引入，webpack就会处理，下面不需要使用，可以省略
下载css-loader和style-loader
配置webpack.config.js
打包后的html文件并没有引入css文件
css代码被打包到出口文件index.html
（代码经过压缩，是给浏览器运行，不是给程序员阅读）
运行后，样式生效
下载bootstrap
引入bootstrap
表单等样式生效
21.优化-提取 css 代码
将原本嵌入在js文件中的css代码提取出来作为独立的一个文件
单独的css文件可以让浏览器缓存起来，减少js文件体积，让浏览器下载更快，
浏览器可以并行下载css和js，让网页更快显示在用户眼前。
该插件在css-loader文档中有关联
MiniCssExtractPlugin | webpack 中文文档 (docschina.org)
也可以在百度进行相关搜索（使用新版webpack，对答案发布时间进行控制），确认插件的名字
打包进了main.css
上面的是bootstrap的css代码
下面是index.css代码
我们在webpack的入口文件引入的相关css代码被单独提取到一个css文件中
并且在html文件中被引入
生效
22.优化-压缩过程
bootstrap的css代码本就被压缩过，而手写的css代码提取后没有经过压缩
CssMinimizerWebpackPlugin | webpack 中文文档 (docschina.org)
下包->配置包->打包后，看到新包中的手写css代码被压缩
js代码不受影响，保持压缩
样式生效
23.打包 less 代码
使用miniCssExtractPlugin.loader代替style.loader
24.打包图片
目的：减少http请求次数
准备一张大图，一张小图
不能直接给img的src属性赋值路径，webpack会当成普通字符串，原封不动打包
注意：js 中引入本地图片资源要用 import 方式（如果是网络图片http地址，字符串可以直接写）
打包后，大图发送一个文件，小图导出data URI（base64字符串）
25.用户登录 - 完成功能
request.js导出（默认导出）
alert.js导出（命名导出）
将其他js代码导入到index.js
打包后的js代码：
检验：
登陆成功
错误验证码
