webpack打包原理：
webpack是一个js应用程序的静态模块打包工具，当webpack处理应用程序时，它的内部构建一个依赖图，此时依赖会映射项目中所需的每个模块，并生成一个或多个bundle包。因此我们会安装配置各种打包规则，其中mode配置的是打包模式，开发环境或者生产环境；entry配置打包入口，根=根据commonjsES6Module模块规范分析各模块间的依赖，从而按照相关依赖关系进行打包；output配置打包出口；loader配置的是加载器，一般用于实现代码编译；plugin可配置插件，处理压缩等；resolve为解析器，其中可在alias中配置@用来替代src路径；optimization可设置优化项进行js和css压缩；devServer配合webpack-dev-server在本地启动web服务器实现项目雨来以及跨域处理；webpack是基于nodejs进行打包的，并将打包后的内容交给浏览器去访问。
proxy跨域代理原理：
客户端向服务器发请求，代理服务器与客户端的域名、协议、端口号相同为同源，因此可以发送请求给代理服务器，然后请求数据通过代理服务器转发到真正的服务器获取数据，服务器与服务器之间没有域的限制，所以可将数据返回给代理服务器，然后代理服务器将数据转发给客户端。
强缓存原理：
客户端基于GUI线程进行渲染，遇到img、script、link都会单独开辟新的http网络请求，并去服务器获取相关资源，返回给客户端html相关代码，客户端一旦发现对应响应头字段信息，自己将缓存资源存储到本地，并且缓存相关标识，如果需要设置强缓存，需要服务器返回资源的同时在响应头中设置expires和cache-controls，设置强缓存后如果要保证服务器资源更新同时本地资源也更新，那入口文件index.html一定不能设置强缓存，需要通过打包文件名不同进行更新其内容。
typescript
// 在webpack.config.js文件中
const path = require('path') // node内置的路径处理模块
const HtmlWebpackPlugin = require('html-webpack-plugin') // 打包编译的html，对打包后的html进行压缩处理
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 自动删除之前打包的文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将css文件提取到单独的文件
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin') // 压缩css文件
const TerserWebpackPlugin = require('terser-webpack-plugin') // 压缩js文件
// 多页面入口需要的配置
// 前提我们设置的名字和src、public入口页面模版名字相同，打包后的文件也基于命名
const pageArr = ['index','login']
const entryObj = {}
const htmlPlugin = []
pageArr.forEach((chunk)=>{
entryObj[chunk] = `./src/${chunk}.js`
htmlPlugin.push(
new HtmlWebpackPlugin({
template:`./public/${chunk}.html`, // 指定页面模版
filename:`${chunk}.html`, // 打包后文件名称
minify:true, // 视都压缩
chunks:[chunk] // 指定导入资源的名称
})
)
})
module.exports = {
// 基础设置
mode: 'production', // 打包模式
entry: './src/index.js', // 单页面入口
// 多页面入口
// entry: entryObj
output:{
filename:'main.[hash:8].js',
// [hash:8]为打包后的文件创建哈希值，代码被修改生成文件名中哈希值也变化，有助于强缓存的设置
path:path.resolve(__dirname,'./dist')
},
// 优化项，设置压缩方式
optimization:{
minimizer: [
new CssMinimizerWebpackPlugin(),
new TerserWebpackPlugin()
]
},
// 使用插件
plugins:[
new HtmlWebpackPlugin({
template:'./public/index.html',
filename:'index.html',
minify:true
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
// 打包后的css文件名称,单独提取到css文件中，并自动导入html文件
filename:'main.[hash:8].css'
})
],
// dev-server
devServer:{
host:'127.0.0.1', // 域名
port:3000, // 端口号
open:true, // 自动打开浏览器
hot:true, // 热更新
compress:true, // 开启服务器端的gizp压缩
proxy:{ // 跨域处理
'/api':{
target:'http://www.com.wd', // 代理真正的服务器地址
pathRewrite:{'^/api':''}, // 地址重写，主要用于区分不同代理前缀，从最后请求的真正地址中移除
changeOrigin:true, // 修改请求头中origin源信息
ws:true // 支持webscoket通信机制
}
}
},
// loader加载器：执行顺序 上->下 右->左
module:{
rules:[{
test: /.\(css|less)$/, // 基于正则匹配，我们需要处理的文件
use:[{
MiniCssExtractPlugin.loader, // 抽离css代码
// "style-loader", // 把css以内嵌式导入页面
"css-loader", // 处理特殊语法
// 在package.json文件中设置browserslist浏览器兼容性
// 在postcss.config.js文件中设置插件导入autoprefixer设置css3样式问题
"postcss-loader", // 配合autoprefixer&browserslist给css3属性设置前缀
"less-loader" // 将less编译为css
},{
// 在babel.config.js文件中将es6转化为es5，@babel/preset-env
test: /.\js$/,
use:["babel-loader"],// 有关js兼容性处理，将es6转化为es5，使用babel-loader、@babel/preset-env、@babel/core、@browserslist
// es6内置api的兼容，导入@babel/polyfill，对常见内置api进行重写，但对fetch、reflect没有重写
exclude: /node_modules/ // 可优化打包速度，忽略node_modules
},{
// 图片引入静态资源地址进行渲染，遇到静态资源图片会重新向服务器发送请求，然后编码再进行渲染，图片速度会较慢
// 将图片转化为base64格式，可以直接不用向服务器发送请求，这样图片渲染速度会加快
// js中处理静态资源图片，需要基于ESModule规范导入，这样打包才会对此图片进行打包，如果写相对地址打包后地址会不一样，找不到图片
test: /\.(png|jpe?g|gif)$/i,
type:'javascript/auto', // webpack5需要的
use:[{
loader: 'url-loader',
options:{
limit:200*1024, // 将指定大小内的图片转化为base64
esModule:false,
name: 'images/[name].[hash:8].[ext]' // 编译后没有转化为base64的图片，编译输出的路径和名称
}
}]
}]
}]
},
// 设置打包最大资源大小
performance:{
maxAssetSize:100*1024*1024,
maxEntrypointSize:100*1024*1024
},
// 解析器
resolve:{
// @以后代表的就是src这个路径
alias:{ '@':path.resolve(__dirname,'./src') }
}
}