搭建开发环境
问题：之前改代码，需重新打包才能运行查看，效率很低
开发环境：配置webpack-dev-server快速开发应用程序
作用：启动Web服务，自动检测代码变化，热更新到网页
注意：dist目录和打包内容是在内存里（更新快）
步骤：
1.下载webpack-dev-server软件包到当前项目
npm i webpack-dev-server --save-dev2.在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添加如下代码，路径一定要写相对路径，否则会报错
打包模式的应用
需求：在开发模式下用style-loader内嵌更快，在生产模式下提取css代码
方案1：webpack.config.js配置导出函数，但是局限性大（只接受2种模式）
方案2（推荐）：借助cross-env（跨平台通用）包命令，设置参数区分环境
步骤：
1.下载cross-env软件包到当前项目
npm i cross-env --save-dev2.在package.json文件中配置自定义命令，传入参数名和值（会绑定到process.env对象下）
3.在webpack.config.js区分不同环境使用不同配置
4.重新打包观察两种配置区别
方案3：配置不同的webpack.config.js（适用多种模式差异性较大情况）
前端-注入环境变量
需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效
问题：cross-env设置的只在Node.js环境生效，前端代码无法访问process.env.NODE_ENV
解决：使用Webpack内置的DefinePlugin插件
文档：DefinePlugin | webpack 中文文档
在webpack.config.js中添加如下代码：
作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式
应用：上线和开发的API基地址切换
开发环境调错
问题：代码被压缩和混淆，报错时无法正确定位源代码位置
source map资源地图功能:可以准确追踪errror和warning在原始代码的位置
设置：在webpack.config.js中配置devtool选项
inline-source-map选项：把源码的位置信息一起打包在js文件内
注意：source map仅适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置），所以需要加判断条件
解析别名alias
问题：路径比较长且相对路径不安全
解析别名：配置模块如何解析，创建import引入路径的别名，来确保模块引入变得更简单
解决：在webpack.config.js中配置解析别名@来代表src绝对路径
如果是js文件或json文件，后面的.js/.json可以省略
配置完后要重启，否则可能修改不生效
优化-CDN使用
CDN定义：内容分发网络，指的是一组分布在各个地区的服务器
作用：把静态资源文件/第三方库放在CDN网络中各个服务器中，供用户就近请求获取
好处：减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略
需求：开发模式使用本地第三方库，生产模式下使用CDN加载引入
步骤：
1.在html中引入第三方库的CDN地址并用模板语法判断（插入js语法）
2.配置webpack.config.js中externals外部扩展选项（防止某些import的包被打包）
value不能写空字符串或为空
import 'bootstrap/dist/css/bootstrap.min.css'=>'bootstrap/dist/css/bootstrap.min.css':'bootstrap'
import axios from 'axios'=>'axios':'axios'
3.两种模式下打包观察效果
免费前端开源项目CDN：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
也可以使用：https://unpkg.com/+你要查找的项目名，自动生成的链接就可以作为导入的CDN
多页面打包
单页面：单个html文件，切换DOM的方式实现不同业务逻辑展示
多页面：多个html文件，切换页面实现不同业务逻辑展示
步骤：
1.准备源码（html,css,js）放入相应位置，并改用模块化语法导入导出
注意：没有到导入和导出，只是为了让目标js代码被一起打包进来，参与html最后的运行，直接导入js文件即可
import 'js文件路径'wangeditor比较特殊，使用如下代码导入：
const wangEditor=require('@wangeditor/editor')2.下载form-serialize包并导入到核心代码中使用
3.配置webpack.config.js多入口和多页面的设置
4.重新打包观察效果
优化-分割公共代码
需求：把2个以上页面引用的公共代码提取
步骤：
1.配置webpack.config.js的splitChunks分隔功能
2.打包观察效果