1Webpack有什么作用谈谈你对它的理解现在的前端网页功能丰富特别是SPAsingle page web application 单页应用技术流行后JavaScript的复杂度增加和需要一大堆依赖包还需要解决Scss、Less……新增样式的扩展写法的编译工作。Webpack 最核心的功能就是实现静态模块打包当Webpack 处理应用程序时会递归构建一个依赖关系图其中包含应用程序需要的每个模块然后将这些模块打包成一个或多个bundle资源包。WebPack 是一个模块打包工具可以使用WebPack管理模块并分析模块间的依赖关系最终编绎输出模块为HTML、JavaScript、CSS以及各种静态文件图片、字体等让开发过程更加高效。2、webpack的基本功能也就是各种loader的作用代码转换TypeScript 编译成 JavaScript、ES6转ES5、SCSS 编译成 CSS 等等(各种loader)代码语法检测自动检测代码是否符合语法 eslint-loader代码分割打包代码时可以将代码切割成不同的chunk(块)实现按需加载降低了初始化时间提升了首屏渲染效率监测代码更新自动编译刷新页面监听本地源代码的变化自动构建刷新浏览器自动刷新自动发布更新完代码后自动构建出线上发布代码并传输给发布系统(没用过)。文件压缩压缩 JavaScript、CSS、HTML代码缩小文件体积(比如说打包后的js、css、html文件会去掉代码之间的空隔紧凑显示)模块合并由于模块化的开发一个页面可能会由多个模块组成所以编译时需要把各个模块合并成一个文件模块化开发引出的功能对于不同类型的资源webpack有对应的模块加载器loader比如说CSS解析CSS的css-loader、style-loader解析less的less-loadersass的sass-loader,JS解析将 TypeScript 转换成 JavaScript的ts-loader解析ES6为ES5的babel-loader解析JavaScript 代码规范的eslint-loaderVue解析.vue文件的vue-loader、解析常用图片以及音视频资源的url-loader、解析文件的file-loader解析 JSON 文件的json-loader等3、webpack配制说明Webpack运行在node.js环境下它的配置文件webpack.config.js遵循CommonJS规范最终export出一个json对象。webpack.config.js基础配置说明1、entry指定了模块的入口它让源文件加入构建流程中被webpack控制。2、output配置输出文件的存放位置、文件名、文件基础路径publicPath。3、module配置各种类型文件的解析规则,比如说.vue文件、.js文件、.css文件的loader等。4、rosolve配置alias(别名)或者定义寻找模块的规则。5、plugins配置扩展插件扩展webpack的更多功能。6、devServer实现本地http服务等。4、webpack打包流程1、从入口(entry) 开始递归转换入口文件所依赖的module2、每找到一个module就根据对应的loader去转换这个module3、然后再对当前module依赖的所有module进行转换如果子module还有依赖的话再转换直至没有依赖4、其次根据入口和模块之间的依赖关系组装成一个个包含多个模块的 Chunk5、最后Webpack会把所有Chunk转换成文件输出在整个流程中Webpack会在恰当的时机执行plugin里定义的扩展插件。5、Loader 和 Plugin 的区别功能不同Loader 本质是一个函数对接收到的文件进行转换比如将ts转换成js将scss转换成css等。Plugin 是webpack的插件可以扩展 Webpack 的功能。运行时机不同loader运行在打包文件之前对文件进行预处理plugins 运行在loader结束后webpack打包的整个过程中它是基于事件机制监听webpack打包过程中的某些节点从而执行相应任务进而改变输出。6、说一下 webpack 的热更新原理webpack 的热更新又称为热替换Hot Module Replacement缩写为 HMR这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。热更新的核心就是客户端与服务端建立的websocket连接服务端监听文件变化编译后再推送给客户端告之其哪些地方改变了最终客户端发送ajax请求获取最新资源使用文件系统替换修改的内容实现局部更新。7、如何提高 webpack 的打包速度1、使用高版本的 Webpack 和 Node.js2、通过 externals 配置提取页面公共资源, 将基础包通过 CDN 引入不打入 bundle 中3、充分利用缓存提升二次构建速度babel-loader 开启缓存或terser-webpack-plugin 缓存等4、使用 thread-loader /HappyPack实现多进程加速编译。5、使用 uglifyjs-webpack-plugin 对js进行代码压缩。6、 优化 resolve 配置缩小范围如只采用 main 字段作为入口文件描述字段 减少搜索步骤。7、使用 tree-shaking 和 Scope hoisting 来剔除多余代码。8、tree shaking 原理是什么webpack中Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术清除一些被 import 了但其实没有被使用的代码。实现原理Tree-shaking 的实现一是先标记出模块导出值中哪些没有被用过二是使用 Terser 删掉这些没被用到的导出语句。标记过程大致可划分为三个步骤1、Make 阶段收集模块导出变量并记录到模块依赖关系图 ModuleGraph 变量中2、Seal 阶段遍历 ModuleGraph 标记模块导出变量有没有被使用3、生成产物时若变量没有被其它模块使用则删除对应的导出语句标记功能只会影响到模块的导出语句真正执行“「Shaking」”操作的是 Terser 插件。只需要用 Terser 提供的 DCE 功能就可以删除这一段定义语句不可能被执行到的代码以此实现完整的 Tree Shaking 效果。9、source map 是什么生产环境怎么用source map 是将编译、打包、压缩后的代码映射会源代码的过程。打包压缩后的代码不具备良好的可读性想要调试源码就需要 source map。map 文件只要不打开开发者工具浏览器是不会加载的。10、文件指纹是什么文件指纹是指打包后输出文件的名的后缀。文件指纹通常有两个用途1、版本管理在发布版本时通过文件指纹来区分 修改的文件 和 未修改的文件。2、使用缓存未修改的文件文件指纹保持不变浏览器继续使用缓存访问。常见的文件指纹1、hash和整个项目的构建相关只要项目文件有修改整个项目构建的 hash 就会变化。2、chunkhash和webpack打包的 chunk 有关不同的 chunk、不同的 entry 会生成不同的 chunkhash。3、contenthash根据文件内容来定义 hash文件内容不发生变化则contenthash就不会变化。直接在输出文件名添加对应的 hash值即可。11、说说Vitevite 是一种新型前端构建工具能够显著提升前端开发体验它主要由两部分组成一个开发服务器它基于原生ES模块 提供了丰富的内建功能如速度快到惊人的 模块热更新HMR一套构建指令它使用 Rollup打包你的代码并且它是预配置的可以输出用于生产环境的优化过的静态资源相比于WebpackRollup要小巧的多12、Babel的编译流程解析阶段Parse 这一阶段是使用babel/parser将代码解析生成抽象语法树AST。是一个对于js代码的编译过程该过程分为两个阶段词法分析和语法分析词法分析对输入的字符序列做标记化(tokenization)操作。语法分析处理标记与标记之间的关系最终形成一颗完整的 AST 结构。转换阶段Transform 这一阶段使用babel/traverse提供的方法对 AST 进行深度优先遍历在此过程对AST进行添加更新及移出等操作。生成阶段Generate 这一阶段使用babel/generator将上一阶段处理后的 AST 转换为js代码。可以简单总结为是code to AST到AST to AST到 AST to code的三个过程。13、vite与webpack的区别Vite 和 Webpack 最大的区别在于开发环境的工作模式。 Webpack 在开发启动的时候会把项目全部模块完整编译打包项目越大启动越慢热更新需要重新构建依赖树。 Vite 开发环境不做全量打包利用浏览器原生 ES Module按需加载模块所以启动秒开改动文件只更新当前模块热更新更快。生产环境两者都会打包Vite 底层使用 Rollup 打包Tree‑shaking 效果更好。 Webpack 使用 loader 处理资源转换、plugin 做构建扩展Vite 没有 loader统一使用插件机制。 Webpack 对 CommonJS 模块兼容性更好生态完善适合老项目Vite 更偏向 ESM新项目体验好Q1Vite 开发环境不打包为什么生产环境要打包浏览器原生 ESM 在生产环境直接使用会产生大量 http 请求性能差。所以生产环境还是需要 Rollup 打包合并、压缩、做代码分割。Q2Vite 的 HMR 和 Webpack HMR 区别Webpack HMR 会重新构建改动文件的整个依赖树Vite 只替换修改的模块不重算依赖速度更快。Q3Vite 为什么不直接用 Webpack 做生产打包Rollup 针对 ES Module 做优化tree‑shaking 更好更适合现代 Vue/TS 项目。Q4什么是 Tree‑shaking剔除代码中没有被使用的死代码只保留用到的代码Rollup 比 Webpack 对 ESM 的 tree‑shaking 效果更好。14.你配置过webpack或vite哪些Vite 配置开发代理 proxy配置接口代理解决本地开发跨域配置changeOrigin、路径 rewrite 重写。环境变量配置.env.development/.env.production区分开发、测试、生产环境注入全局环境变量。打包优化重点对应 JD 定制打包方案rollupOptions.output.manualChunks手动拆分 chunk把 vue、echarts 这类大第三方库单独拆包利用浏览器缓存配置 build 的压缩、代码分割开启 tree‑shaking配置静态资源处理图片资源处理输出目录自定义插件配置使用unplugin‑vue‑components自动导入组件unplugin‑auto‑import自动导入 api自定义构建钩子写简单的构建脚本打包前后执行自定义逻辑。import { defineConfig, loadEnv } from vite import vue from vitejs/plugin-vue // 自动导入组件、api import AutoImport from unplugin-auto-import/vite import Components from unplugin-vue-components/vite export default defineConfig(({ mode, command }) { // 加载环境变量 const env loadEnv(mode, process.cwd()) return { plugins: [ vue(), // unplugin-auto-import自动导入vue api不用每次import ref/reactive AutoImport({ imports: [vue, vue-router], dts: src/auto-imports.d.ts // 生成类型声明文件 }), // unplugin-vue-components自动导入组件不用手动import Components({ dirs: [src/components], // 扫描组件目录 dts: src/components.d.ts }), // 自定义构建钩子打包前后执行逻辑 { name: custom-build-hook, // 构建开始前 buildStart() { console.log(✅构建开始执行前置脚本) }, // 构建完成之后 closeBundle() { console.log(✅打包完成执行后置脚本) // 这里可以写node逻辑复制文件、删除目录、打印信息等 } } ], build: { // 开启压缩esbuild压缩vite默认就是esbuild minify: esbuild, // 代码分割、tree‑shaking rollupOptions: { output: { // 自定义输出目录 dir: dist, // 输出根目录 // 静态资源图片、字体输出子目录 assetFileNames: assets/[name]-[hash][extname], // js chunk输出目录 chunkFileNames: js/[name]-[hash].js, entryFileNames: js/[name]-[hash].js, // 手动代码分割拆分第三方库 manualChunks: { vue-vendor: [vue, vue-router, pinia], echarts-vendor: [echarts] } } }, // tree‑shakingvite默认开启rollup会剔除未使用的esm代码 // 注意只对ESM生效commonjs不支持tree‑shaking commonjsOptions: { include: [/node_modules/] } }, // 静态资源图片处理 assetsInlineLimit: 4096, // 小于4kb的图片转base64内联大于则输出为静态文件 } })15.vite环境变量如何配置Vite 环境变量必须以VITE_开头否则不会暴露给业务代码分文件.env公共、.env.development开发、.env.production生产读取import.meta.env.xxx不是process.envVite 不使用 process.env不同环境会做合并同名字段环境专属文件优先级 公共.env 学习webpack、vite、babel
1Webpack有什么作用谈谈你对它的理解现在的前端网页功能丰富特别是SPAsingle page web application 单页应用技术流行后JavaScript的复杂度增加和需要一大堆依赖包还需要解决Scss、Less……新增样式的扩展写法的编译工作。Webpack 最核心的功能就是实现静态模块打包当Webpack 处理应用程序时会递归构建一个依赖关系图其中包含应用程序需要的每个模块然后将这些模块打包成一个或多个bundle资源包。WebPack 是一个模块打包工具可以使用WebPack管理模块并分析模块间的依赖关系最终编绎输出模块为HTML、JavaScript、CSS以及各种静态文件图片、字体等让开发过程更加高效。2、webpack的基本功能也就是各种loader的作用代码转换TypeScript 编译成 JavaScript、ES6转ES5、SCSS 编译成 CSS 等等(各种loader)代码语法检测自动检测代码是否符合语法 eslint-loader代码分割打包代码时可以将代码切割成不同的chunk(块)实现按需加载降低了初始化时间提升了首屏渲染效率监测代码更新自动编译刷新页面监听本地源代码的变化自动构建刷新浏览器自动刷新自动发布更新完代码后自动构建出线上发布代码并传输给发布系统(没用过)。文件压缩压缩 JavaScript、CSS、HTML代码缩小文件体积(比如说打包后的js、css、html文件会去掉代码之间的空隔紧凑显示)模块合并由于模块化的开发一个页面可能会由多个模块组成所以编译时需要把各个模块合并成一个文件模块化开发引出的功能对于不同类型的资源webpack有对应的模块加载器loader比如说CSS解析CSS的css-loader、style-loader解析less的less-loadersass的sass-loader,JS解析将 TypeScript 转换成 JavaScript的ts-loader解析ES6为ES5的babel-loader解析JavaScript 代码规范的eslint-loaderVue解析.vue文件的vue-loader、解析常用图片以及音视频资源的url-loader、解析文件的file-loader解析 JSON 文件的json-loader等3、webpack配制说明Webpack运行在node.js环境下它的配置文件webpack.config.js遵循CommonJS规范最终export出一个json对象。webpack.config.js基础配置说明1、entry指定了模块的入口它让源文件加入构建流程中被webpack控制。2、output配置输出文件的存放位置、文件名、文件基础路径publicPath。3、module配置各种类型文件的解析规则,比如说.vue文件、.js文件、.css文件的loader等。4、rosolve配置alias(别名)或者定义寻找模块的规则。5、plugins配置扩展插件扩展webpack的更多功能。6、devServer实现本地http服务等。4、webpack打包流程1、从入口(entry) 开始递归转换入口文件所依赖的module2、每找到一个module就根据对应的loader去转换这个module3、然后再对当前module依赖的所有module进行转换如果子module还有依赖的话再转换直至没有依赖4、其次根据入口和模块之间的依赖关系组装成一个个包含多个模块的 Chunk5、最后Webpack会把所有Chunk转换成文件输出在整个流程中Webpack会在恰当的时机执行plugin里定义的扩展插件。5、Loader 和 Plugin 的区别功能不同Loader 本质是一个函数对接收到的文件进行转换比如将ts转换成js将scss转换成css等。Plugin 是webpack的插件可以扩展 Webpack 的功能。运行时机不同loader运行在打包文件之前对文件进行预处理plugins 运行在loader结束后webpack打包的整个过程中它是基于事件机制监听webpack打包过程中的某些节点从而执行相应任务进而改变输出。6、说一下 webpack 的热更新原理webpack 的热更新又称为热替换Hot Module Replacement缩写为 HMR这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。热更新的核心就是客户端与服务端建立的websocket连接服务端监听文件变化编译后再推送给客户端告之其哪些地方改变了最终客户端发送ajax请求获取最新资源使用文件系统替换修改的内容实现局部更新。7、如何提高 webpack 的打包速度1、使用高版本的 Webpack 和 Node.js2、通过 externals 配置提取页面公共资源, 将基础包通过 CDN 引入不打入 bundle 中3、充分利用缓存提升二次构建速度babel-loader 开启缓存或terser-webpack-plugin 缓存等4、使用 thread-loader /HappyPack实现多进程加速编译。5、使用 uglifyjs-webpack-plugin 对js进行代码压缩。6、 优化 resolve 配置缩小范围如只采用 main 字段作为入口文件描述字段 减少搜索步骤。7、使用 tree-shaking 和 Scope hoisting 来剔除多余代码。8、tree shaking 原理是什么webpack中Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术清除一些被 import 了但其实没有被使用的代码。实现原理Tree-shaking 的实现一是先标记出模块导出值中哪些没有被用过二是使用 Terser 删掉这些没被用到的导出语句。标记过程大致可划分为三个步骤1、Make 阶段收集模块导出变量并记录到模块依赖关系图 ModuleGraph 变量中2、Seal 阶段遍历 ModuleGraph 标记模块导出变量有没有被使用3、生成产物时若变量没有被其它模块使用则删除对应的导出语句标记功能只会影响到模块的导出语句真正执行“「Shaking」”操作的是 Terser 插件。只需要用 Terser 提供的 DCE 功能就可以删除这一段定义语句不可能被执行到的代码以此实现完整的 Tree Shaking 效果。9、source map 是什么生产环境怎么用source map 是将编译、打包、压缩后的代码映射会源代码的过程。打包压缩后的代码不具备良好的可读性想要调试源码就需要 source map。map 文件只要不打开开发者工具浏览器是不会加载的。10、文件指纹是什么文件指纹是指打包后输出文件的名的后缀。文件指纹通常有两个用途1、版本管理在发布版本时通过文件指纹来区分 修改的文件 和 未修改的文件。2、使用缓存未修改的文件文件指纹保持不变浏览器继续使用缓存访问。常见的文件指纹1、hash和整个项目的构建相关只要项目文件有修改整个项目构建的 hash 就会变化。2、chunkhash和webpack打包的 chunk 有关不同的 chunk、不同的 entry 会生成不同的 chunkhash。3、contenthash根据文件内容来定义 hash文件内容不发生变化则contenthash就不会变化。直接在输出文件名添加对应的 hash值即可。11、说说Vitevite 是一种新型前端构建工具能够显著提升前端开发体验它主要由两部分组成一个开发服务器它基于原生ES模块 提供了丰富的内建功能如速度快到惊人的 模块热更新HMR一套构建指令它使用 Rollup打包你的代码并且它是预配置的可以输出用于生产环境的优化过的静态资源相比于WebpackRollup要小巧的多12、Babel的编译流程解析阶段Parse 这一阶段是使用babel/parser将代码解析生成抽象语法树AST。是一个对于js代码的编译过程该过程分为两个阶段词法分析和语法分析词法分析对输入的字符序列做标记化(tokenization)操作。语法分析处理标记与标记之间的关系最终形成一颗完整的 AST 结构。转换阶段Transform 这一阶段使用babel/traverse提供的方法对 AST 进行深度优先遍历在此过程对AST进行添加更新及移出等操作。生成阶段Generate 这一阶段使用babel/generator将上一阶段处理后的 AST 转换为js代码。可以简单总结为是code to AST到AST to AST到 AST to code的三个过程。13、vite与webpack的区别Vite 和 Webpack 最大的区别在于开发环境的工作模式。 Webpack 在开发启动的时候会把项目全部模块完整编译打包项目越大启动越慢热更新需要重新构建依赖树。 Vite 开发环境不做全量打包利用浏览器原生 ES Module按需加载模块所以启动秒开改动文件只更新当前模块热更新更快。生产环境两者都会打包Vite 底层使用 Rollup 打包Tree‑shaking 效果更好。 Webpack 使用 loader 处理资源转换、plugin 做构建扩展Vite 没有 loader统一使用插件机制。 Webpack 对 CommonJS 模块兼容性更好生态完善适合老项目Vite 更偏向 ESM新项目体验好Q1Vite 开发环境不打包为什么生产环境要打包浏览器原生 ESM 在生产环境直接使用会产生大量 http 请求性能差。所以生产环境还是需要 Rollup 打包合并、压缩、做代码分割。Q2Vite 的 HMR 和 Webpack HMR 区别Webpack HMR 会重新构建改动文件的整个依赖树Vite 只替换修改的模块不重算依赖速度更快。Q3Vite 为什么不直接用 Webpack 做生产打包Rollup 针对 ES Module 做优化tree‑shaking 更好更适合现代 Vue/TS 项目。Q4什么是 Tree‑shaking剔除代码中没有被使用的死代码只保留用到的代码Rollup 比 Webpack 对 ESM 的 tree‑shaking 效果更好。14.你配置过webpack或vite哪些Vite 配置开发代理 proxy配置接口代理解决本地开发跨域配置changeOrigin、路径 rewrite 重写。环境变量配置.env.development/.env.production区分开发、测试、生产环境注入全局环境变量。打包优化重点对应 JD 定制打包方案rollupOptions.output.manualChunks手动拆分 chunk把 vue、echarts 这类大第三方库单独拆包利用浏览器缓存配置 build 的压缩、代码分割开启 tree‑shaking配置静态资源处理图片资源处理输出目录自定义插件配置使用unplugin‑vue‑components自动导入组件unplugin‑auto‑import自动导入 api自定义构建钩子写简单的构建脚本打包前后执行自定义逻辑。import { defineConfig, loadEnv } from vite import vue from vitejs/plugin-vue // 自动导入组件、api import AutoImport from unplugin-auto-import/vite import Components from unplugin-vue-components/vite export default defineConfig(({ mode, command }) { // 加载环境变量 const env loadEnv(mode, process.cwd()) return { plugins: [ vue(), // unplugin-auto-import自动导入vue api不用每次import ref/reactive AutoImport({ imports: [vue, vue-router], dts: src/auto-imports.d.ts // 生成类型声明文件 }), // unplugin-vue-components自动导入组件不用手动import Components({ dirs: [src/components], // 扫描组件目录 dts: src/components.d.ts }), // 自定义构建钩子打包前后执行逻辑 { name: custom-build-hook, // 构建开始前 buildStart() { console.log(✅构建开始执行前置脚本) }, // 构建完成之后 closeBundle() { console.log(✅打包完成执行后置脚本) // 这里可以写node逻辑复制文件、删除目录、打印信息等 } } ], build: { // 开启压缩esbuild压缩vite默认就是esbuild minify: esbuild, // 代码分割、tree‑shaking rollupOptions: { output: { // 自定义输出目录 dir: dist, // 输出根目录 // 静态资源图片、字体输出子目录 assetFileNames: assets/[name]-[hash][extname], // js chunk输出目录 chunkFileNames: js/[name]-[hash].js, entryFileNames: js/[name]-[hash].js, // 手动代码分割拆分第三方库 manualChunks: { vue-vendor: [vue, vue-router, pinia], echarts-vendor: [echarts] } } }, // tree‑shakingvite默认开启rollup会剔除未使用的esm代码 // 注意只对ESM生效commonjs不支持tree‑shaking commonjsOptions: { include: [/node_modules/] } }, // 静态资源图片处理 assetsInlineLimit: 4096, // 小于4kb的图片转base64内联大于则输出为静态文件 } })15.vite环境变量如何配置Vite 环境变量必须以VITE_开头否则不会暴露给业务代码分文件.env公共、.env.development开发、.env.production生产读取import.meta.env.xxx不是process.envVite 不使用 process.env不同环境会做合并同名字段环境专属文件优先级 公共.env