webpack打包原理：
webpack是一個js應(yīng)用程序的靜態(tài)模塊打包工具，當(dāng)webpack處理應(yīng)用程序時，它的內(nèi)部構(gòu)建一個依賴圖，此時依賴會映射項目中所需的每個模塊，并生成一個或多個bundle包。因此我們會安裝配置各種打包規(guī)則，其中mode配置的是打包模式，開發(fā)環(huán)境或者生產(chǎn)環(huán)境；entry配置打包入口，根=根據(jù)commonjsES6Module模塊規(guī)范分析各模塊間的依賴，從而按照相關(guān)依賴關(guān)系進(jìn)行打包；output配置打包出口；loader配置的是加載器，一般用于實現(xiàn)代碼編譯；plugin可配置插件，處理壓縮等；resolve為解析器，其中可在alias中配置@用來替代src路徑；optimization可設(shè)置優(yōu)化項進(jìn)行js和css壓縮；devServer配合webpack-dev-server在本地啟動web服務(wù)器實現(xiàn)項目雨來以及跨域處理；webpack是基于nodejs進(jìn)行打包的，并將打包后的內(nèi)容交給瀏覽器去訪問。
proxy跨域代理原理：
客戶端向服務(wù)器發(fā)請求，代理服務(wù)器與客戶端的域名、協(xié)議、端口號相同為同源，因此可以發(fā)送請求給代理服務(wù)器，然后請求數(shù)據(jù)通過代理服務(wù)器轉(zhuǎn)發(fā)到真正的服務(wù)器獲取數(shù)據(jù)，服務(wù)器與服務(wù)器之間沒有域的限制，所以可將數(shù)據(jù)返回給代理服務(wù)器，然后代理服務(wù)器將數(shù)據(jù)轉(zhuǎn)發(fā)給客戶端。
強緩存原理：
客戶端基于GUI線程進(jìn)行渲染，遇到img、script、link都會單獨開辟新的http網(wǎng)絡(luò)請求，并去服務(wù)器獲取相關(guān)資源，返回給客戶端html相關(guān)代碼，客戶端一旦發(fā)現(xiàn)對應(yīng)響應(yīng)頭字段信息，自己將緩存資源存儲到本地，并且緩存相關(guān)標(biāo)識，如果需要設(shè)置強緩存，需要服務(wù)器返回資源的同時在響應(yīng)頭中設(shè)置expires和cache-controls，設(shè)置強緩存后如果要保證服務(wù)器資源更新同時本地資源也更新，那入口文件index.html一定不能設(shè)置強緩存，需要通過打包文件名不同進(jìn)行更新其內(nèi)容。

// 在webpack.config.js文件中
const path = require('path') // node內(nèi)置的路徑處理模塊
const HtmlWebpackPlugin = require('html-webpack-plugin') // 打包編譯的html，對打包后的html進(jìn)行壓縮處理
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文件// 多頁面入口需要的配置
// 前提我們設(shè)置的名字和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] // 指定導(dǎo)入資源的名稱}))
})module.exports = {// 基礎(chǔ)設(shè)置mode: 'production', // 打包模式entry: './src/index.js', // 單頁面入口// 多頁面入口// entry: entryObjoutput:{filename:'main.[hash:8].js',// [hash:8]為打包后的文件創(chuàng)建哈希值，代碼被修改生成文件名中哈希值也變化，有助于強緩存的設(shè)置path:path.resolve(__dirname,'./dist')},// 優(yōu)化項，設(shè)置壓縮方式optimization:{minimizer: [new CssMinimizerWebpackPlugin(),new TerserWebpackPlugin()]},// 使用插件plugins:[new HtmlWebpackPlugin({template:'./public/index.html',filename:'index.html',minify:true}),new CleanWebpackPlugin(),new MiniCssExtractPlugin({// 打包后的css文件名稱,單獨提取到css文件中，并自動導(dǎo)入html文件filename:'main.[hash:8].css'})],// dev-serverdevServer:{host:'127.0.0.1', // 域名port:3000, // 端口號open:true, // 自動打開瀏覽器hot:true, // 熱更新compress:true, // 開啟服務(wù)器端的gizp壓縮proxy:{ // 跨域處理'/api':{target:'http://www.com.wd', // 代理真正的服務(wù)器地址pathRewrite:{'^/api':''}, // 地址重寫，主要用于區(qū)分不同代理前綴，從最后請求的真正地址中移除changeOrigin:true, // 修改請求頭中origin源信息ws:true // 支持webscoket通信機制}}},// loader加載器：執(zhí)行順序 上->下 右->左module:{rules:[{test: /.\(css|less)$/, // 基于正則匹配，我們需要處理的文件use:[{MiniCssExtractPlugin.loader, // 抽離css代碼// "style-loader", // 把css以內(nèi)嵌式導(dǎo)入頁面"css-loader", // 處理特殊語法// 在package.json文件中設(shè)置browserslist瀏覽器兼容性// 在postcss.config.js文件中設(shè)置插件導(dǎo)入autoprefixer設(shè)置css3樣式問題"postcss-loader", // 配合autoprefixer&browserslist給css3屬性設(shè)置前綴"less-loader" // 將less編譯為css},{// 在babel.config.js文件中將es6轉(zhuǎn)化為es5，@babel/preset-envtest: /.\js$/,use:["babel-loader"],// 有關(guān)js兼容性處理，將es6轉(zhuǎn)化為es5，使用babel-loader、@babel/preset-env、@babel/core、@browserslist// es6內(nèi)置api的兼容，導(dǎo)入@babel/polyfill，對常見內(nèi)置api進(jìn)行重寫，但對fetch、reflect沒有重寫exclude: /node_modules/ // 可優(yōu)化打包速度，忽略node_modules},{// 圖片引入靜態(tài)資源地址進(jìn)行渲染，遇到靜態(tài)資源圖片會重新向服務(wù)器發(fā)送請求，然后編碼再進(jìn)行渲染，圖片速度會較慢// 將圖片轉(zhuǎn)化為base64格式，可以直接不用向服務(wù)器發(fā)送請求，這樣圖片渲染速度會加快// js中處理靜態(tài)資源圖片，需要基于ESModule規(guī)范導(dǎo)入，這樣打包才會對此圖片進(jìn)行打包，如果寫相對地址打包后地址會不一樣，找不到圖片test: /\.(png|jpe?g|gif)$/i,type:'javascript/auto', // webpack5需要的use:[{loader: 'url-loader',options:{limit:200*1024, // 將指定大小內(nèi)的圖片轉(zhuǎn)化為base64esModule:false,name: 'images/[name].[hash:8].[ext]' // 編譯后沒有轉(zhuǎn)化為base64的圖片，編譯輸出的路徑和名稱}}]}]}]},// 設(shè)置打包最大資源大小performance:{maxAssetSize:100*1024*1024,maxEntrypointSize:100*1024*1024},// 解析器resolve:{// @以后代表的就是src這個路徑alias:{ '@':path.resolve(__dirname,'./src') }}}