Webpack-Vite

stealPigs-youth

已于 2025-03-09 14:05:22 修改

阅读量1.8k

点赞数 7

文章标签： webpack javascript 前端

于 2025-01-08 00:25:01 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73090085/article/details/129724901

版权

构建工具的作用

语法转换：ts转js；js新语法转js旧语法；浏览器不支持的语法转浏览器支持的语法
提升性能：代码压缩、代码分割
优化开发体验：服务器热更新、代码调试

构建方式

浏览器支持ESModule相对路径引入、ESModule绝对路径引入

webpack

webpack顺着CommonJS和ESModule导入语句，打包所有JS、CSS、asset资源
资源全部打包后，浏览器才正式开始渲染页面

vite

vite把将要发送给浏览器的JS、CSS、asset资源进行加工，比如文件名引入转成相对路径引入。
浏览器使用ESModule语法，引入所有加工过的JS、CSS、asset资源

webpack配置文件

const path=require("path")
module.exports={

    //入口
    entry:相对路径||绝对路径,
    entry:[
        相对路径||绝对路径,
        相对路径||绝对路径,
        ....
    ]
    entry:{
        entry01:相对路径||绝对路径,
        entry02:相对路径||绝对路径,
        ...
    }

    //js文件出口
    output:{
        //相对的是webpack.config.js的路径
        path:相对路径||绝对路径,
        
        //入口写字符串或数组的形式，只用一个出口
        filename:"bundle.js"

        //入口写对象的形式，多个出口，[name]是entry对象的属性名
        filename:"[name].bundle.js"
        
        //chunk文件名
        chunkFilename: '[id].chunk.js'

        //清空上次打包结果
        clean:true||false
    }

    //loader
    module:{
        rules:[
            {
                test:文件类型1,
                include||exclude:文件名||[文件名1,文件名2...]
                use:[
                    loader1,
                    {
                        loader:loader2,
                        
                        //options属性作为参数，被loader接收
                        options:{}
                    }
                ]
            },
            {
                test:文件类型2,
                use:[loader1,loader2...]
            }
        ]
    }
    
    //插件
    plugins:[插件1,,插件2...]
    
    //服务器
    devServer:{
        host:主机名,
        port:端口号,
        open:true||false  //自动打开浏览器
        compress: true,   // 启用压缩
        hot:true||false   //启动热模块替换
        proxy: {
            '/api': {
                target: 目标域名:,
                changeOrigin: true, 
                pathRewrite:{"^/api":""}  //webpack是pathRewrite，vite是rewrite
            }
        }
    }
    
    解析策略
    resolve: {
        extensions: ['.js', '.json'],             //导入文件时，不必说明扩展名
        alias: {                                  //路径别名
            '@': path.resolve(__dirname, 'src/')  
        },
        modules: ['node_modules'],                //第三方模块所在的文件夹
        
        //在没有配置entry时，启用的默认入口文件
        //这里的main，指的是package.json中的main属性值
        mainFields: ['browser', 'main']           
   }
   
    //模式
    mode:'development'||'production',
    
    //调试工具
    devtool:'source-map'||'eval'||false

    //优化配置
    optimization: {
    
        minimize: true,                    //代码压缩
        minimizer: [插件1,插件2..。]        //代码压缩的插件
        splitChunks: {                     //代码分割1
            chunks: 'all',
            minSize: 30000,                //体积大于此值的块会分割
            minChunks: 2,                  //引用次数大于等于此值的块会分割
            cacheGroups:{
                splitChunkOne:{
                    test:路径,
                    priority:权重,
                    其他属性和splitChunks相同             
                },
                splitChunkTwo:{
                    test:路径,
                    priority:权重,
                    其他属性和splitChunks相同             
                }
            }
        }
        usedExports:true||false           //启用tree shaking
        
        //生成一个文件，记录每一个chunk的唯一标识
        //chunkA改变，但chunkA的唯一标识没变
        //引入chunkA的其他chunk，发现chunkA的唯一标识没变，其他chunk就不会变
        runtimeChunk: {                   
            name: (entrypoint) => `runtime~${entrypoint.name}`,
        },
    }, 
}


//react&&webpack配置路径别名：修改node_modules\react-scripts\config\webpack.config.js

loader

webpack默认只能打包js、json文件，以及实现import、require的转换
使用babel-loader，把js新语法转换成js旧语法
使用loader，能打包css、img、fonts、CSV、TSV、XML等文件

export function myLoader(resource){      //resource是读取的文件内容
    const options=this.getOptions()      //对文件内容进行加工
    return resource                      //返回加工文件
}

plugins

plugin向webpack的生命周期中，注册的回调函数

class MyPlugin{
    constructor(options){
        this.options=options    
    }
    apply(compiler){
        compiler.hooks.钩子名称.tap("MyPlugin",()=>{})
    }
}

注册插件的配置项

对象.plugins.插件
对象.module.rules.options.plugins.插件
对象.optimization.minimizer.插件

mode

不同的模式，会采取不同的优化策略

开发模式

保留代码的原始结构和格式
生成具有良好可读性的源代码映射
提供更多的警告和错误信息

生产模式

代码压缩
去除多余的注释和空格
提取公共代码

vite配置文件

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig(()=>{
    const env = loadEnv("development", process.cwd(),"")
    return {
        plugins: [],
        resolve: {
          alias: {},
          mainFields: {},
          extensions: {}
        },
        css:{
          postcss:,
          preprocessorOptions:{
            scss:{
              javascriptEnabled:true,
              additionalData:'@import "./src/assets/variable.scss";'
            }
          },
          devSourcemap:true           //启用source-map
        },
        server:{
          open:true,
          proxy:{
            '/api':{
              target:'http://sph-api.atguigu.cn',
              changeOrigin:true,
              rewrite:(path)=>path.replace(/^\/api/,'')
            },
          }
        },
        root:项目根目录,
        mode:"production"             //开发模式,
    }
)

环境变量

mode的值

defineConfig(({mode})=>{})
vite => mode="development"
vite build =>mode="production"
vite --mode xxx => mode="xxx"
vite --mode yyy => mode="yyy"

loadEnv

loadEnv(mode,projectPath,prefix)的返回值：
[projectPath]/.env.[mode]文件中，[profix]开头的环境变量
profix的默认值是VITE

import.meta.env

.env.xxx文件中以"VITE"开头的变量，会挂载到import.meta.env上

webpack脚手架

会把环境变量挂载到process.env上

Vite目录结构

整体结构

project
-- .vscode
-- node_module
-- public

---xxx

---yyy

---zzz
-- src

---aaa

---bbb

---ccc
-- .env.production
-- .env.development
-- .gitignore
-- index.html
-- jsconfig.json
-- package.json
-- package-lock.json
-- vite.config.js