webpack基础配置【总结】

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一定不能设置强缓存，需要通过打包文件名不同进行更新其内容。

// 在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: entryObjoutput:{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-serverdevServer:{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-envtest: /.\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, // 将指定大小内的图片转化为base64esModule:false,name: 'images/[name].[hash:8].[ext]' // 编译后没有转化为base64的图片，编译输出的路径和名称}}]}]}]},// 设置打包最大资源大小performance:{maxAssetSize:100*1024*1024,maxEntrypointSize:100*1024*1024},// 解析器resolve:{// @以后代表的就是src这个路径alias:{ '@':path.resolve(__dirname,'./src') }}}