文章目录webpack及vite知识点webpack(vue2)一、webpack定义二、webpack安装配置三、Webpack配置项vite(vue3)一、定义二、安装及配置三、环境变量及模式四、相关命令webpack及vite相关面试题webpack(vue2)1、webpack是什么有什么作用2、webpack与grunt、gulp的不同3、Webpack核心概念有哪些请分别说明4、请描述Webpack的完整打包流程5、有哪些常⻅的Loader6、有哪些常⻅的Plugin7、Loader和Plugin的不同8、bundlechunkmodule是什么9、Tree Shaking的原理是什么如何确保生效10、什么是代码分割Code Splitting有哪些实现方式11、怎么配置单⻚应⽤怎么配置多⻚应⽤12、如何⽤webpack来优化前端性能vite(vue3)1、Vite 是什么它解决了什么问题2、Vite 的工作原理是什么3、Vite 如何实现按需加载4、Vite 中的 vite.config.js 文件是做什么用的5、Vite 如何处理 CSS 和静态资源6、Vite 的插件机制是如何工作的7、Vite 如何实现热模块替换HMR8、Vite 与 Webpack 和 Rollup 的关系是怎样的9、Vite 的构建输出有哪些选项10、Vite 的开发服务器支持 HTTPS 吗11、Vite 如何配置多个入口文件12、Vite 的性能优化有哪些方法13、Vite 的 base 配置项有什么作用14、Vite 中如何定义全局常量15、Vite 的构建版本和开发版本有什么区别16、Vite 如何处理 TypeScript 项目ES模块ESM和CommonJS区别AMD 和 CMD 的区别是什么webpack及vite知识点webpack(vue2)一、webpack定义webpack是一个js模块打包工具使用它管理项目中的模块依赖并编译输出模块所需的静态文件。webpack基于入口会自动地递归解析入口所需要加载的所有资源文件将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。打包的过程中用loader来处理不同的文件(webpack原生只能解析js代码若要其他文件也打包需要loader)用plugin来扩展webpack功能二、webpack安装配置安装npm install --save-dev webpack webpack-cli配置项目根目录创建webpack.config.js编写webpack.config.js来初始化配置在package.json的scripts节点中加入配置修改入口文件添加添加语句script src /bundle.js/script启动开发模式: 使用npm run serve启动开发服务器支持热重载。生产模式: 使用npm run build构建项目生成的文件会放在dist目录下。//局部安装--save-dev或简写 -D表示将 Webpack 作为开发依赖不包含在生产构建中npminstall--save-dev webpack webpack-cli //全局安装官方明确不推荐此做法因为会锁定全局版本导致不同项目间出现兼容性问题npminstall-gwebpack webpack-cliwebpack.config.jsconstpathrequire(path)module.exports{entry:./src/main.js,output:{path:path.resolve(__dirname,dist),//动态获取绝对路径,__dirname是node中全局变量filename:bundle.js},}packge.jsonbuild:webpack --mode production,dev:webpack serve --mode development,// serve: vue-cli-service serve --no-lint,// build: vue-cli-service build --no-lint,入口文件index.htmlbodyscriptsrc/bundle.js/script/body三、Webpack配置项mode用来指定构建方式可选值有development和productionentry指定打包入口。默认的打包入口文件为src-index.jsoutput指定打包出口。默认的打包入口文件为dist-main.jsmodule.rules配置loader处理不同的文件常见的loadercss-loader处理css文件。需要安装npm i style-loader css-loader在module.rules中使用{ test:/\.css$/,use:[style-loader,css-loader]}less-loader处理less文件。需要安装npm i less-loader less在module.rules中使用{ test:/\.less$/,use:[style-loader,css-loader,less-loader]}style-loader将css代码注入js中通过DOM操作加载cssbabel-loaderes6-es5img-loader加载并压缩图片文件plugins挂载插件使用之前要先安装npm i webpack-dev-server -D注意点如果想要将最新的配置生效则需要使用命令npm run dev来重新生效配置常见的pluginhtml-webpack-plugin压缩html。安装npm i html-webpack-plugin -D在plugins中挂载插件的实例clean-webpack-plugin自动删除dist目录下的旧文件commons-chunk-plugin提取公共代码devServer对webpack-dev-server插件进行更多的配置constpathrequire(path)// 实例化pluginconstHtmlPluginrequire(html-webpack-plugin)consthtmlPluginnewHtmlPlugin({template:./src/index.html,filename:/index.html})constCleanWebpackPluginrequire(clean-webpack-plugin)constcleanPluginnewCleanWebpackPlugin()module.exports{mode:development,//mode用来指定构建方式可选值有development和productionentry:./src/main.js,output:{path:path.resolve(__dirname,dist),//输出文件的路径。动态获取绝对路径,__dirname是node中全局变量filename:bundle.js//输出文件的名称},module:{rules:[{test:/\.css$/,use:[style-loader,css-loader]},//采用正则表示loader来处理css后缀的文件{test:/\.less$/,use:[style-loader,css-loader,less-loader]}//处理less]}plugins:[htmlPlugin,cleanPlugin],//插件实例devServer:{//对webpack-dev-server插件进行更多的配置open:true,//打包完成后自动打开浏览器host:127.0.0.1,//实时打包使用的主机地址port:80,//实时打包使用的端口号}}vite(vue3)一、定义Vite作为一款现代化的前端构建工具凭借其快速的冷启动和高效的热更新确实能显著提升开发体验Vite通过利用浏览器原生的 ES 模块导入功能实现了闪电般的冷启动。在开发环境下它无需打包而是直接按需编译和提供源码。生产构建则使用 Rollup确保输出高度优化的静态资源。二、安装及配置Vite 需要 Node.js 版本 20.19 或 22.12 。// 创建新项目npmcreate vitelatest一个典型的 Vite 项目结构如下my-project/ ├── node_modules/ # 依赖包 ├── public/ # 静态资源直接复制到构建输出 ├── src/ │ ├── assets/ # 图片、字体等资源 │ ├── App.jsx/.vue # 主组件 │ └── main.jsx/.ts # 入口文件 ├── index.html # zwnj;**入口 HTML 文件位于根目录**zwnj; ├── package.json ├── vite.config.js # Vite 配置文件 └── README.mdVite 的配置写在 vite.config.js 或 vite.config.ts 中// vite.config.jsimport{defineConfig}fromviteexportdefaultdefineConfig({// 你的配置选项})import{defineConfig}fromviteexportdefaultdefineConfig(({command,mode}){// command: serve 或 build// mode: 通常是 development 或 productionif(commandserve){return{// 开发环境独有配置server:{port:3000}}}else{// command buildreturn{// 生产环境构建独有配置build:{outDir:build}}}})配置项base设置部署应用时的基本 URLbuild配置构建输出相关的选项server配置开发服务器plugins使用插件来扩展 Vite 的功能resolve配置模块解析选项optimizeDeps优化依赖预构建define 和 envPrefix (环境变量)定义全局常量或在构建时注入环境变量css 和 cssCodeSplit (CSS 相关配置)配置 CSS 处理和分割importvuefromvitejs/plugin-vueimportlegacyfromvitejs/plugin-legacyimport{defineConfig}fromviteexportdefault{base:/app/,build:{outDir:dist,// 构建输出目录assetsDir:assets,// 静态资源目录sourcemap:true,// 生成 source mapminify:esbuild,// 混淆器使用 esbuildrollupOptions:{// rollup 打包选项}},server:{port:3000,// 开发服务器端口号open:true,// 在服务器启动时自动在浏览器中打开应用cors:true,// 允许跨域请求proxy:{// 代理配置例如将 /api/* 的请求代理到 localhost:5000/api/*/api:{target:http://localhost:5000,changeOrigin:true,rewrite:(path)path.replace(/^\/api/,)}}},plugins:[vue(),legacy()],resolve:{alias:{// 路径别名例如将 指向 src 目录:/path/to/src}},optimizeDeps:{include:[some-package],// 强制包含的依赖包列表这些包不会被 esbuild 转换而是在预构建阶段处理。exclude:[another-package]// 排除的依赖包列表这些包不会被预构建。},define:{// 在编译时定义全局常量例如process.env.NODE_ENV 将被替换为 production 或 development。__APP_VERSION__:JSON.stringify(process.env.npm_package_version)||0.0.0},envPrefix:[VITE_,TAURI_],// 环境变量前缀用于从 .env 文件加载环境变量。例如VITE_SOME_KEY 或 TAURI_SOME_KEY。css:{// CSS 相关配置项例如 CSS 分割和预处理器配置。modules:{// CSS Modules 配置}}}三、环境变量及模式环境变量文件Vite 使用.env 文件来加载环境变量 .env所有模式都会加载.env.development开发环境加载.env.production生产环境加载使用环境变量在客户端代码中只有以 VITE_ 开头的变量才会被注入 。在代码中通过 import.meta.env.VITE_自定义变量名 访问 。内置变量import.meta.env.MODE应用运行的模式。import.meta.env.DEV是否为开发环境 。import.meta.env.PROD是否为生产环境 。import.meta.env.BASE_URL部署的基础路径// .env.developmentVITE_API_BASE_URLhttp://localhost:3000/api// 在你的代码中console.log(import.meta.env.VITE_API_BASE_URL)在 Vite 配置中加载环境变量默认情况下Vite 不会在配置文件中加载 .env 文件。如果需要在配置中使用可以手动调用 loadEnv 函数 // vite.config.jsimport{defineConfig,loadEnv}fromviteexportdefaultdefineConfig(({mode}){// 加载对应模式的环境变量第三个参数为空字符串表示加载所有constenvloadEnv(mode,process.cwd(),)return{// 使用环境变量例如设置服务器端口server:{port:env.VITE_APP_PORT?Number(env.VITE_APP_PORT):5173,},}})四、相关命令npm run dev启动开发服务器npm run build生产环境构建输出到 dist/ 目录npm run preview本地预览生产构建结果webpack及vite相关面试题webpack(vue2)1、webpack是什么有什么作用Webpack是js的静态模块打包工具核心是将各类资源JS、CSS、图片等视为模块通过分析依赖关系打包成 浏览器 可识别的静态资源。核心作用模块打包整合分散模块生成bundle文件解决浏览器模块化支持问题。资源转换通过Loader将ES6、SCSS等转为浏览器兼容格式。代码优化Tree Shaking剔除死代码、压缩资源提升加载性能。工程化支持配合插件实现自动化构建、环境区分等工程化能力。2、webpack与grunt、gulp的不同grunt/gulp如果你的工程模块依赖非常简单甚至是没有用到模块化的概念只需要进行简单的合并、压缩webpack如果整个项目使用了模块化管理而且相互依赖非常强3、Webpack核心概念有哪些请分别说明entry入口。指定构建起点Webpack从这里开始解析依赖output出口。定义打包后资源的存储路径和命名规则module加载器。转换非JS资源为Webpack可处理的模块plugins插件。扩展Webpack功能如生成HTML、压缩代码mode模式。区分环境启用对应优化策略4、请描述Webpack的完整打包流程打包流程是一个串⾏的过程初始化参数从配置⽂件和 Shell 语句中读取与合并参数得出最终的参数开始编译⽤上⼀步得到的参数初始化 Compiler 对象加载所有配置的插件执⾏对象的 run ⽅法开始执⾏编译确定⼊⼝根据配置中的entry 找出所有的⼊⼝⽂件编译模块从⼊⼝⽂件出发调⽤所有配置的 Loader 对模块进⾏翻译再找出该模块依赖的模块再递归本步骤直到所有⼊⼝依赖的⽂件都经过了本步骤的处理完成模块编译在经过Loader 翻译完所有模块后得到了每个模块被翻译后的最终内容以及它们之间的依赖关系输出资源根据⼊⼝和模块之间的依赖关系组装成⼀个个包含多个模块的 Chunk再把每个 Chunk 转换成⼀个单独的⽂件加⼊到输出列表这步是可以修改输出内容的最后机会输出完成在确定好输出内容后根据配置确定输出的路径和⽂件名把⽂件内容写⼊到⽂件系统5、有哪些常⻅的Loadercss-loader处理css文件。需要安装npm i style-loader css-loader在module.rules中使用{ test:/\.css$/,use:[style-loader,css-loader]}less-loader处理less文件。需要安装npm i less-loader less在module.rules中使用{ test:/\.less$/,use:[style-loader,css-loader,less-loader]}style-loader将css代码注入js中通过DOM操作加载cssbabel-loaderes6-es5img-loader加载并压缩图片文件6、有哪些常⻅的Pluginhtml-webpack-plugin压缩html。安装npm i html-webpack-plugin -D在plugins中挂载插件的实例clean-webpack-plugin自动删除dist目录下的旧文件commons-chunk-plugin提取公共代码7、Loader和Plugin的不同作用不同loader加载器让webpack拥有加载和解析非js文件的能力webpack原生只能解析js代码若要其他文件也打包需要loaderplugin插件扩展webpack的功能。plugin监听webpack生命周期广播的事件合适时机用webpack的API改变输出结果用法不同loader在module.rules中配置plugin在plugins中配置挂载的是插件实例8、bundlechunkmodule是什么-bundle是由webpack打包出来的⽂件chunk代码块⼀个chunk由多个模块组合⽽成⽤于代码的合并和分割module是开发中的单个模块在webpack的世界⼀切皆模块⼀个模块对应⼀个⽂件webpack会从配置的 entry中递归开始找出所有依赖的模块9、Tree Shaking的原理是什么如何确保生效Tree Shaking是通过静态分析剔除未使用代码的优化手段核心依赖ES Module的静态导入特性。生效条件缺一不可代码使用ES Moduleimport/export而非CommonJSrequire。Mode设为production开发模式默认关闭。package.json中配置sideEffects标记无副作用的文件避免误删CSS等资源10、什么是代码分割Code Splitting有哪些实现方式代码分割是将代码拆分为多个Chunk实现按需加载减少首屏加载体积。主要有3种实现方式多入口分割配置多个Entry适用于多页面应用动态导入通过import()语法实现异步加载适用于路由按需加载splitChunks提取公共代码自动提取多入口公共依赖避免重复打包module.exports{entry:{page1:./src/page1.js,page2:./src/page2.js},//方法一output:{filename:[name].js,path:./dist},optimization:{//方法三splitChunks:{chunks:all,// 分割同步/异步代码cacheGroups:{vendor:{// 提取第三方库如vue、reacttest:/node_modules/,name:vendors,priority:10},common:{// 提取公共业务代码 minChunks: 2, // 被引用2次以上 name: common }}}}}//方法二// 点击按钮异步加载模块document.getElementById(btn).addEventListener(click,async(){constutilsawaitimport(./utils.js);// 生成独立Chunk utils.doSomething(); });11、怎么配置单⻚应⽤怎么配置多⻚应⽤总结在entry入口中配置单页面就是一个地址字符串多页就是一个对象module.exports{entry:/path/file.js,//单⻚应⽤entry:{//多⻚应⽤pageOne:./src/pageOne/index.js,pageTwo:./src/pageTwo/index.js}}12、如何⽤webpack来优化前端性能原理优化webpack的输出结果压缩代码删除多余的代码、注释、简化代码的写法等等⽅式。UglifyJsPlugin 和 ParallelUglifyPlugin压缩JS⽂件cssnano压缩css利⽤CDN加速: 将引⽤的静态资源路径修改为CDN上对应的路径。output中的publicPath或plugins中的stylePublicPluginTree Shaking:删除死代码。在启动webpack时追加参数--optimize-minimizeCode Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存提取公共第三⽅库:SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码vite(vue3)1、Vite 是什么它解决了什么问题Vite 是一个利用现代浏览器对原生ESM支持的构建工具。它跳过了打包操作提供了快速的冷启动和即时的热模块更新。解决了传统打包工具在开发阶段的缓慢问题。2、Vite 的工作原理是什么Vite 在开发阶段使用原生ESM加载方式通过index.html的typemodule脚本标签直接从服务器加载模块。在构建阶段Vite 使用 Rollup 进行打包优化应用体积和性能。3、Vite 如何实现按需加载Vite 支持动态导入允许你使用import()语法来实现组件或模块的按需加载。4、Vite 中的 vite.config.js 文件是做什么用的vite.config.js是Vite 的配置文件允许你自定义 Vite 的行为如定义入口文件、基础路径、构建输出、插件等。5、Vite 如何处理 CSS 和静态资源Vite 允许你直接导入 CSS 文件并且会自动处理。对于静态资源如图片、字体等可以直接放置在 public 目录中Vite 会提供相应的服务。6、Vite 的插件机制是如何工作的Vite 允许通过插件扩展其功能。插件可以介入 Vite 的启动、构建和插件系统提供自定义的配置和行为。7、Vite 如何实现热模块替换HMRVite 使用原生ESM的import.meta.hot属性实现热模块替换允许在不刷新页面的情况下更新模块。8、Vite 与 Webpack 和 Rollup 的关系是怎样的Vite 在开发阶段利用原生ESM导入不需要打包因此比 Webpack 和 Rollup 更快。在构建阶段Vite 使用 Rollup 进行打包以生成优化后的资源。9、Vite 的构建输出有哪些选项Vite 允许你配置构建输出包括输出目录、文件名、源码映射等。10、Vite 的开发服务器支持 HTTPS 吗是的Vite 的开发服务器支持通过https 配置项启用 HTTPS。11、Vite 如何配置多个入口文件在 vite.config.js 中你可以使用build.rollupOptions.input配置多个入口文件。12、Vite 的性能优化有哪些方法Vite 的性能优化包括使用代码分割、预构建、压缩和最小化 CSS 和 JavaScript 文件等技术。13、Vite 的 base 配置项有什么作用base 配置项用于设置应用的基础路径这对于部署到非根路径的应用非常有用。14、Vite 中如何定义全局常量可以在vite.config.js中使用define配置项定义全局常量。15、Vite 的构建版本和开发版本有什么区别开发版本使用 Vite 作为开发服务器提供快速重载和模块热更新。构建版本通过 Rollup 打包优化应用性能和资源体积。16、Vite 如何处理 TypeScript 项目Vite 支持 TypeScript可以直接导入 .ts 或 .tsx 文件并且可以结合 tsconfig.json 文件进行类型检查。原文链接https://blog.csdn.net/qq_29101285/article/details/138772748ES模块ESM和CommonJS区别加载时机CommonJS 是同步加载运行时解析。require() 会阻塞后续代码执行直到模块加载完成ES Module 是 静态解析编译时解析。但支持 import() 实现异步加载返回 Promise。输出类型CommonJS 输出的是 值的拷贝ES Module 输出的是 值的引用。循环依赖处理CommonJS 通过缓存机制处理循环依赖ES Module 通过静态分析解决循环依赖。Tree-shakingES Module 支持静态分析可进行 Tree-shaking 优化CommonJS 不支持AMD 和 CMD 的区别是什么依赖声明时机AMDRequireJS前置声明依赖依赖数组在模块定义时声明CMDSea.js就近声明依赖依赖在代码执行到需要时声明。执行顺序AMD 提前执行依赖模块CMD 延迟执行依赖模块。
面试篇-webpack+vite
文章目录webpack及vite知识点webpack(vue2)一、webpack定义二、webpack安装配置三、Webpack配置项vite(vue3)一、定义二、安装及配置三、环境变量及模式四、相关命令webpack及vite相关面试题webpack(vue2)1、webpack是什么有什么作用2、webpack与grunt、gulp的不同3、Webpack核心概念有哪些请分别说明4、请描述Webpack的完整打包流程5、有哪些常⻅的Loader6、有哪些常⻅的Plugin7、Loader和Plugin的不同8、bundlechunkmodule是什么9、Tree Shaking的原理是什么如何确保生效10、什么是代码分割Code Splitting有哪些实现方式11、怎么配置单⻚应⽤怎么配置多⻚应⽤12、如何⽤webpack来优化前端性能vite(vue3)1、Vite 是什么它解决了什么问题2、Vite 的工作原理是什么3、Vite 如何实现按需加载4、Vite 中的 vite.config.js 文件是做什么用的5、Vite 如何处理 CSS 和静态资源6、Vite 的插件机制是如何工作的7、Vite 如何实现热模块替换HMR8、Vite 与 Webpack 和 Rollup 的关系是怎样的9、Vite 的构建输出有哪些选项10、Vite 的开发服务器支持 HTTPS 吗11、Vite 如何配置多个入口文件12、Vite 的性能优化有哪些方法13、Vite 的 base 配置项有什么作用14、Vite 中如何定义全局常量15、Vite 的构建版本和开发版本有什么区别16、Vite 如何处理 TypeScript 项目ES模块ESM和CommonJS区别AMD 和 CMD 的区别是什么webpack及vite知识点webpack(vue2)一、webpack定义webpack是一个js模块打包工具使用它管理项目中的模块依赖并编译输出模块所需的静态文件。webpack基于入口会自动地递归解析入口所需要加载的所有资源文件将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。打包的过程中用loader来处理不同的文件(webpack原生只能解析js代码若要其他文件也打包需要loader)用plugin来扩展webpack功能二、webpack安装配置安装npm install --save-dev webpack webpack-cli配置项目根目录创建webpack.config.js编写webpack.config.js来初始化配置在package.json的scripts节点中加入配置修改入口文件添加添加语句script src /bundle.js/script启动开发模式: 使用npm run serve启动开发服务器支持热重载。生产模式: 使用npm run build构建项目生成的文件会放在dist目录下。//局部安装--save-dev或简写 -D表示将 Webpack 作为开发依赖不包含在生产构建中npminstall--save-dev webpack webpack-cli //全局安装官方明确不推荐此做法因为会锁定全局版本导致不同项目间出现兼容性问题npminstall-gwebpack webpack-cliwebpack.config.jsconstpathrequire(path)module.exports{entry:./src/main.js,output:{path:path.resolve(__dirname,dist),//动态获取绝对路径,__dirname是node中全局变量filename:bundle.js},}packge.jsonbuild:webpack --mode production,dev:webpack serve --mode development,// serve: vue-cli-service serve --no-lint,// build: vue-cli-service build --no-lint,入口文件index.htmlbodyscriptsrc/bundle.js/script/body三、Webpack配置项mode用来指定构建方式可选值有development和productionentry指定打包入口。默认的打包入口文件为src-index.jsoutput指定打包出口。默认的打包入口文件为dist-main.jsmodule.rules配置loader处理不同的文件常见的loadercss-loader处理css文件。需要安装npm i style-loader css-loader在module.rules中使用{ test:/\.css$/,use:[style-loader,css-loader]}less-loader处理less文件。需要安装npm i less-loader less在module.rules中使用{ test:/\.less$/,use:[style-loader,css-loader,less-loader]}style-loader将css代码注入js中通过DOM操作加载cssbabel-loaderes6-es5img-loader加载并压缩图片文件plugins挂载插件使用之前要先安装npm i webpack-dev-server -D注意点如果想要将最新的配置生效则需要使用命令npm run dev来重新生效配置常见的pluginhtml-webpack-plugin压缩html。安装npm i html-webpack-plugin -D在plugins中挂载插件的实例clean-webpack-plugin自动删除dist目录下的旧文件commons-chunk-plugin提取公共代码devServer对webpack-dev-server插件进行更多的配置constpathrequire(path)// 实例化pluginconstHtmlPluginrequire(html-webpack-plugin)consthtmlPluginnewHtmlPlugin({template:./src/index.html,filename:/index.html})constCleanWebpackPluginrequire(clean-webpack-plugin)constcleanPluginnewCleanWebpackPlugin()module.exports{mode:development,//mode用来指定构建方式可选值有development和productionentry:./src/main.js,output:{path:path.resolve(__dirname,dist),//输出文件的路径。动态获取绝对路径,__dirname是node中全局变量filename:bundle.js//输出文件的名称},module:{rules:[{test:/\.css$/,use:[style-loader,css-loader]},//采用正则表示loader来处理css后缀的文件{test:/\.less$/,use:[style-loader,css-loader,less-loader]}//处理less]}plugins:[htmlPlugin,cleanPlugin],//插件实例devServer:{//对webpack-dev-server插件进行更多的配置open:true,//打包完成后自动打开浏览器host:127.0.0.1,//实时打包使用的主机地址port:80,//实时打包使用的端口号}}vite(vue3)一、定义Vite作为一款现代化的前端构建工具凭借其快速的冷启动和高效的热更新确实能显著提升开发体验Vite通过利用浏览器原生的 ES 模块导入功能实现了闪电般的冷启动。在开发环境下它无需打包而是直接按需编译和提供源码。生产构建则使用 Rollup确保输出高度优化的静态资源。二、安装及配置Vite 需要 Node.js 版本 20.19 或 22.12 。// 创建新项目npmcreate vitelatest一个典型的 Vite 项目结构如下my-project/ ├── node_modules/ # 依赖包 ├── public/ # 静态资源直接复制到构建输出 ├── src/ │ ├── assets/ # 图片、字体等资源 │ ├── App.jsx/.vue # 主组件 │ └── main.jsx/.ts # 入口文件 ├── index.html # zwnj;**入口 HTML 文件位于根目录**zwnj; ├── package.json ├── vite.config.js # Vite 配置文件 └── README.mdVite 的配置写在 vite.config.js 或 vite.config.ts 中// vite.config.jsimport{defineConfig}fromviteexportdefaultdefineConfig({// 你的配置选项})import{defineConfig}fromviteexportdefaultdefineConfig(({command,mode}){// command: serve 或 build// mode: 通常是 development 或 productionif(commandserve){return{// 开发环境独有配置server:{port:3000}}}else{// command buildreturn{// 生产环境构建独有配置build:{outDir:build}}}})配置项base设置部署应用时的基本 URLbuild配置构建输出相关的选项server配置开发服务器plugins使用插件来扩展 Vite 的功能resolve配置模块解析选项optimizeDeps优化依赖预构建define 和 envPrefix (环境变量)定义全局常量或在构建时注入环境变量css 和 cssCodeSplit (CSS 相关配置)配置 CSS 处理和分割importvuefromvitejs/plugin-vueimportlegacyfromvitejs/plugin-legacyimport{defineConfig}fromviteexportdefault{base:/app/,build:{outDir:dist,// 构建输出目录assetsDir:assets,// 静态资源目录sourcemap:true,// 生成 source mapminify:esbuild,// 混淆器使用 esbuildrollupOptions:{// rollup 打包选项}},server:{port:3000,// 开发服务器端口号open:true,// 在服务器启动时自动在浏览器中打开应用cors:true,// 允许跨域请求proxy:{// 代理配置例如将 /api/* 的请求代理到 localhost:5000/api/*/api:{target:http://localhost:5000,changeOrigin:true,rewrite:(path)path.replace(/^\/api/,)}}},plugins:[vue(),legacy()],resolve:{alias:{// 路径别名例如将 指向 src 目录:/path/to/src}},optimizeDeps:{include:[some-package],// 强制包含的依赖包列表这些包不会被 esbuild 转换而是在预构建阶段处理。exclude:[another-package]// 排除的依赖包列表这些包不会被预构建。},define:{// 在编译时定义全局常量例如process.env.NODE_ENV 将被替换为 production 或 development。__APP_VERSION__:JSON.stringify(process.env.npm_package_version)||0.0.0},envPrefix:[VITE_,TAURI_],// 环境变量前缀用于从 .env 文件加载环境变量。例如VITE_SOME_KEY 或 TAURI_SOME_KEY。css:{// CSS 相关配置项例如 CSS 分割和预处理器配置。modules:{// CSS Modules 配置}}}三、环境变量及模式环境变量文件Vite 使用.env 文件来加载环境变量 .env所有模式都会加载.env.development开发环境加载.env.production生产环境加载使用环境变量在客户端代码中只有以 VITE_ 开头的变量才会被注入 。在代码中通过 import.meta.env.VITE_自定义变量名 访问 。内置变量import.meta.env.MODE应用运行的模式。import.meta.env.DEV是否为开发环境 。import.meta.env.PROD是否为生产环境 。import.meta.env.BASE_URL部署的基础路径// .env.developmentVITE_API_BASE_URLhttp://localhost:3000/api// 在你的代码中console.log(import.meta.env.VITE_API_BASE_URL)在 Vite 配置中加载环境变量默认情况下Vite 不会在配置文件中加载 .env 文件。如果需要在配置中使用可以手动调用 loadEnv 函数 // vite.config.jsimport{defineConfig,loadEnv}fromviteexportdefaultdefineConfig(({mode}){// 加载对应模式的环境变量第三个参数为空字符串表示加载所有constenvloadEnv(mode,process.cwd(),)return{// 使用环境变量例如设置服务器端口server:{port:env.VITE_APP_PORT?Number(env.VITE_APP_PORT):5173,},}})四、相关命令npm run dev启动开发服务器npm run build生产环境构建输出到 dist/ 目录npm run preview本地预览生产构建结果webpack及vite相关面试题webpack(vue2)1、webpack是什么有什么作用Webpack是js的静态模块打包工具核心是将各类资源JS、CSS、图片等视为模块通过分析依赖关系打包成 浏览器 可识别的静态资源。核心作用模块打包整合分散模块生成bundle文件解决浏览器模块化支持问题。资源转换通过Loader将ES6、SCSS等转为浏览器兼容格式。代码优化Tree Shaking剔除死代码、压缩资源提升加载性能。工程化支持配合插件实现自动化构建、环境区分等工程化能力。2、webpack与grunt、gulp的不同grunt/gulp如果你的工程模块依赖非常简单甚至是没有用到模块化的概念只需要进行简单的合并、压缩webpack如果整个项目使用了模块化管理而且相互依赖非常强3、Webpack核心概念有哪些请分别说明entry入口。指定构建起点Webpack从这里开始解析依赖output出口。定义打包后资源的存储路径和命名规则module加载器。转换非JS资源为Webpack可处理的模块plugins插件。扩展Webpack功能如生成HTML、压缩代码mode模式。区分环境启用对应优化策略4、请描述Webpack的完整打包流程打包流程是一个串⾏的过程初始化参数从配置⽂件和 Shell 语句中读取与合并参数得出最终的参数开始编译⽤上⼀步得到的参数初始化 Compiler 对象加载所有配置的插件执⾏对象的 run ⽅法开始执⾏编译确定⼊⼝根据配置中的entry 找出所有的⼊⼝⽂件编译模块从⼊⼝⽂件出发调⽤所有配置的 Loader 对模块进⾏翻译再找出该模块依赖的模块再递归本步骤直到所有⼊⼝依赖的⽂件都经过了本步骤的处理完成模块编译在经过Loader 翻译完所有模块后得到了每个模块被翻译后的最终内容以及它们之间的依赖关系输出资源根据⼊⼝和模块之间的依赖关系组装成⼀个个包含多个模块的 Chunk再把每个 Chunk 转换成⼀个单独的⽂件加⼊到输出列表这步是可以修改输出内容的最后机会输出完成在确定好输出内容后根据配置确定输出的路径和⽂件名把⽂件内容写⼊到⽂件系统5、有哪些常⻅的Loadercss-loader处理css文件。需要安装npm i style-loader css-loader在module.rules中使用{ test:/\.css$/,use:[style-loader,css-loader]}less-loader处理less文件。需要安装npm i less-loader less在module.rules中使用{ test:/\.less$/,use:[style-loader,css-loader,less-loader]}style-loader将css代码注入js中通过DOM操作加载cssbabel-loaderes6-es5img-loader加载并压缩图片文件6、有哪些常⻅的Pluginhtml-webpack-plugin压缩html。安装npm i html-webpack-plugin -D在plugins中挂载插件的实例clean-webpack-plugin自动删除dist目录下的旧文件commons-chunk-plugin提取公共代码7、Loader和Plugin的不同作用不同loader加载器让webpack拥有加载和解析非js文件的能力webpack原生只能解析js代码若要其他文件也打包需要loaderplugin插件扩展webpack的功能。plugin监听webpack生命周期广播的事件合适时机用webpack的API改变输出结果用法不同loader在module.rules中配置plugin在plugins中配置挂载的是插件实例8、bundlechunkmodule是什么-bundle是由webpack打包出来的⽂件chunk代码块⼀个chunk由多个模块组合⽽成⽤于代码的合并和分割module是开发中的单个模块在webpack的世界⼀切皆模块⼀个模块对应⼀个⽂件webpack会从配置的 entry中递归开始找出所有依赖的模块9、Tree Shaking的原理是什么如何确保生效Tree Shaking是通过静态分析剔除未使用代码的优化手段核心依赖ES Module的静态导入特性。生效条件缺一不可代码使用ES Moduleimport/export而非CommonJSrequire。Mode设为production开发模式默认关闭。package.json中配置sideEffects标记无副作用的文件避免误删CSS等资源10、什么是代码分割Code Splitting有哪些实现方式代码分割是将代码拆分为多个Chunk实现按需加载减少首屏加载体积。主要有3种实现方式多入口分割配置多个Entry适用于多页面应用动态导入通过import()语法实现异步加载适用于路由按需加载splitChunks提取公共代码自动提取多入口公共依赖避免重复打包module.exports{entry:{page1:./src/page1.js,page2:./src/page2.js},//方法一output:{filename:[name].js,path:./dist},optimization:{//方法三splitChunks:{chunks:all,// 分割同步/异步代码cacheGroups:{vendor:{// 提取第三方库如vue、reacttest:/node_modules/,name:vendors,priority:10},common:{// 提取公共业务代码 minChunks: 2, // 被引用2次以上 name: common }}}}}//方法二// 点击按钮异步加载模块document.getElementById(btn).addEventListener(click,async(){constutilsawaitimport(./utils.js);// 生成独立Chunk utils.doSomething(); });11、怎么配置单⻚应⽤怎么配置多⻚应⽤总结在entry入口中配置单页面就是一个地址字符串多页就是一个对象module.exports{entry:/path/file.js,//单⻚应⽤entry:{//多⻚应⽤pageOne:./src/pageOne/index.js,pageTwo:./src/pageTwo/index.js}}12、如何⽤webpack来优化前端性能原理优化webpack的输出结果压缩代码删除多余的代码、注释、简化代码的写法等等⽅式。UglifyJsPlugin 和 ParallelUglifyPlugin压缩JS⽂件cssnano压缩css利⽤CDN加速: 将引⽤的静态资源路径修改为CDN上对应的路径。output中的publicPath或plugins中的stylePublicPluginTree Shaking:删除死代码。在启动webpack时追加参数--optimize-minimizeCode Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存提取公共第三⽅库:SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码vite(vue3)1、Vite 是什么它解决了什么问题Vite 是一个利用现代浏览器对原生ESM支持的构建工具。它跳过了打包操作提供了快速的冷启动和即时的热模块更新。解决了传统打包工具在开发阶段的缓慢问题。2、Vite 的工作原理是什么Vite 在开发阶段使用原生ESM加载方式通过index.html的typemodule脚本标签直接从服务器加载模块。在构建阶段Vite 使用 Rollup 进行打包优化应用体积和性能。3、Vite 如何实现按需加载Vite 支持动态导入允许你使用import()语法来实现组件或模块的按需加载。4、Vite 中的 vite.config.js 文件是做什么用的vite.config.js是Vite 的配置文件允许你自定义 Vite 的行为如定义入口文件、基础路径、构建输出、插件等。5、Vite 如何处理 CSS 和静态资源Vite 允许你直接导入 CSS 文件并且会自动处理。对于静态资源如图片、字体等可以直接放置在 public 目录中Vite 会提供相应的服务。6、Vite 的插件机制是如何工作的Vite 允许通过插件扩展其功能。插件可以介入 Vite 的启动、构建和插件系统提供自定义的配置和行为。7、Vite 如何实现热模块替换HMRVite 使用原生ESM的import.meta.hot属性实现热模块替换允许在不刷新页面的情况下更新模块。8、Vite 与 Webpack 和 Rollup 的关系是怎样的Vite 在开发阶段利用原生ESM导入不需要打包因此比 Webpack 和 Rollup 更快。在构建阶段Vite 使用 Rollup 进行打包以生成优化后的资源。9、Vite 的构建输出有哪些选项Vite 允许你配置构建输出包括输出目录、文件名、源码映射等。10、Vite 的开发服务器支持 HTTPS 吗是的Vite 的开发服务器支持通过https 配置项启用 HTTPS。11、Vite 如何配置多个入口文件在 vite.config.js 中你可以使用build.rollupOptions.input配置多个入口文件。12、Vite 的性能优化有哪些方法Vite 的性能优化包括使用代码分割、预构建、压缩和最小化 CSS 和 JavaScript 文件等技术。13、Vite 的 base 配置项有什么作用base 配置项用于设置应用的基础路径这对于部署到非根路径的应用非常有用。14、Vite 中如何定义全局常量可以在vite.config.js中使用define配置项定义全局常量。15、Vite 的构建版本和开发版本有什么区别开发版本使用 Vite 作为开发服务器提供快速重载和模块热更新。构建版本通过 Rollup 打包优化应用性能和资源体积。16、Vite 如何处理 TypeScript 项目Vite 支持 TypeScript可以直接导入 .ts 或 .tsx 文件并且可以结合 tsconfig.json 文件进行类型检查。原文链接https://blog.csdn.net/qq_29101285/article/details/138772748ES模块ESM和CommonJS区别加载时机CommonJS 是同步加载运行时解析。require() 会阻塞后续代码执行直到模块加载完成ES Module 是 静态解析编译时解析。但支持 import() 实现异步加载返回 Promise。输出类型CommonJS 输出的是 值的拷贝ES Module 输出的是 值的引用。循环依赖处理CommonJS 通过缓存机制处理循环依赖ES Module 通过静态分析解决循环依赖。Tree-shakingES Module 支持静态分析可进行 Tree-shaking 优化CommonJS 不支持AMD 和 CMD 的区别是什么依赖声明时机AMDRequireJS前置声明依赖依赖数组在模块定义时声明CMDSea.js就近声明依赖依赖在代码执行到需要时声明。执行顺序AMD 提前执行依赖模块CMD 延迟执行依赖模块。
