搭建开发环境
问题：之前改代码，需重新打包才能运行查看，效率很低
开发环境：配置webpack-dev-server快速开发应用程序
作用：启动Web服务，自动检测代码变化，热更新到网页
注意：dist目录和打包内容是在内存里（更新快）
步骤：
1.下载webpack-dev-server软件包到当前项目
npm i webpack-dev-server --save-dev
2.在webpack.config.js文件中设置模式为开发模式
在package.json文件中配置自定义命令
3.使用npm run dev来启动开发服务器，试试热更新效果
webpack-dev-server借助http模块创建8080默认Web服务
默认以public文件夹作为服务器根目录，去显示里面名字为index的网页，如果没有该网页，则会显示成如上图，所以要加具体名称去访问页面
问题：没有css样式和js效果
解决：webpack-dev-server根据配置，打包相关代码在内存当中，以output.path的值作为服务器根目录，所以可以直接自己拼接访问dist目录下内容
打包之后自动打开某页面：在public文件夹下新建index.html文件
打包模式
打包模式：告知Webpack使用相应模式的内置优化
分类：
设置：
方式1：在webpack.config.js配置文件设置mode选项
方式2：在package.json命令行设置mode参数
注意：命令行设置的优先级高于配置文件中的，推荐使用命令行设置
优化：把main.css打包进login文件夹中
解决：在webpack.config.js文件中找到MiniCssExtractPlugin添加如下代码，路径一定要写相对路径，否则会报错
