webpack 是一个静态模块打包工具，从入口开始构建依赖关系，打包有关文件，最后展示所输出的内容

作用把静态模块内容，压缩，转译，打包等

常用plugin

html-webpakc-plugin 自动生成html文件，并引入打包后的其他资源
mini-css-minimizer-webpack-plugin 压缩单独css文件代码
clean-webpack-plugin 清除打包输出的包
webpack.definePlugin 定义变量打包时候
Uglify-js-plugin || TerserPlugin（更好处理es6）压缩js
optimization.splitChunks 提取公共文件不打包

optimization: { 
splitChunks: { 
chunks: 'all', cacheGroups: 
{ vendor: { test: /node_modules/, name: 'vendor', minChunks: 1, } } } }

    new webpack.DefinePlugin({ ISPRO: true })

webpack.providePlugin 配置全局模块可以不用引入
BundleAnalyzerPlugin 用于分析资源打包的依赖及大小分析
imageminPlugin 压缩图片

常用loader

style-loader/css-loader 解析css-loader
mini-css-extract-plugin 提取到独立的css文件，从而css被浏览器缓存，减少js文件体积，css和js并行加载
babel-loader 将js转换兼容低版本浏览器
postcss-loader css 单位像素转换
url-loader 将图片转换为编码
markdown-loader 本地导入md文件渲染，通过打包处理
file-loader 与 url-loader 相似，url-loader包括file-loader

    module: { // 加载器
        rules: [ // 规则列表
          {
            test: /\.css$/i, // 匹配 .css 结 尾的文件
            //use: ['style-loader', 'css-loader'], // 使用从后到前的加载器来解析 css 代码和插入到 DOM
            use:[MiniCssExtractPlugin.loader,'css-loader']
          }
        ]
  }

webpack 插件开发

在插件函数的prototype 上定义apply方法，apply的compiler 为参数常用的 compiler 编译器，可以获取webpack主环境和 compilation 对象提供多关键点回调供插件做自定义处理时选择

vite 插件开发

服务器启动阶段 options,buildStart 请求响应阶段 resolveId,load,transform 服务器关闭阶段 buildEnd closeBundle 钩子

`const exmaplePlugin = () => { let config

return { name: 'read-config',

configResolved(resolvedConfig) {
  // 记录最终配置
  config = resolvedConfig
},

// 在其他钩子中可以访问到配置
transform(code, id) {
  console.log(config)
}

} } `

部署流程

静态文件托管（nginx,apache）简单高效适用单页面应用
云服务器
容器化部署
混合部署，静态托管+云或传统后端

框架打包处理了很多缓存的问题，灰度部署,nginx 通过 upstream 配置通过 weight=10 控制分流量 map

map $cookie_user_group $backend_group { default backend_old; v2 backend_new; } upstream backend_old { server 192.168.0.1:8081; } upstream backend_new { server 192.168.0.1:8082; } server { listen 80; location / { proxy_pass http://$backend_group; } }

webpack 和 vite 的打包和部署流程

webpack 插件开发

vite 插件开发

部署流程