2023年6月21日发(作者：)
前端⾯试题《webpack打包构建项⽬优化》webpack插件的基本组成
⼀个具名 JavaScript 函数；在它的原型上定义 apply ⽅法；指定⼀个触及到 Webpack 本⾝的事件钩⼦；操作 Webpack 内部的实例特定数据；在实现功能后调⽤ Webpack 提供的 callback。⼀个基本插件class HelloWorldPlugin { apply(compiler) { ('Hello World Plugin', ( stats /* 在 hook 被触及时，会将 stats 作为参数传⼊。*/ ) => { ('Hello World!'); }); }}s = HelloWorldPlugin;webpack与 vite 的不同， vite的速度提升在哪⾥webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。⽽vite是直接启动开发服务器，请求哪个模块再对该模块进⾏实时编译。由于现代浏览器本⾝就⽀持ES Module，会⾃动向依赖的Module发出请求。vite充分利⽤这⼀点，将开发环境下的模块⽂件，就作为浏览器要执⾏的⽂件，⽽不是像webpack那样进⾏打包合并。由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度⾮常快。当浏览器请求某个模块时，再根据需要对模块内容进⾏编译。这种按需动态编译的⽅式，极⼤的缩减了编译时间，项⽬越复杂、模块越多，vite的优势越明显。在HMR（热更新）⽅⾯，当改动了⼀个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译⼀次，效率更⾼。当需要打包到⽣产环境时，vite使⽤传统的rollup（也可以⾃⼰⼿动安装webpack来）进⾏打包，因此，vite的主要优势在开发阶段。另外，由于vite利⽤的是ES Module，因此在代码中（除了⾥⾯，这⾥是node的执⾏环境）不可以使⽤CommonJSrollup和webpack的区别？简单的来说rollup是⼀个Js模块打包器，可以将⼩块代码编译成⼤块复杂的代码。现在已经有很多类库都在使⽤ 进⾏打包了，⽐如：,, , ,, 等。优点：⼩巧⽽专注 特性: rollup 所有资源放同⼀个地⽅，⼀次性加载,利⽤ tree-shake特性来 剔除未使⽤的代码，减少冗余 webpack 拆分代码、按需加载 webpack2已经逐渐⽀持tree-shake rollup: 1.打包你的 js ⽂件的时候如果发现你的⽆⽤变量，会将其删掉。 2.可以将你的 js 中的代码，编译成你想要的格式 webpack: 1.代码拆分 2.静态资源导⼊（如 js、css、图⽚、字体等） 拥有如此强⼤的功能，所以 webpack 在进⾏资源打包的时候，就会产⽣很多冗余的代码。项⽬（特别是类库）只有 js，⽽没有其他的静态资源⽂件，使⽤ webpack 就有点⼤才⼩⽤了，因为 webpack bundle ⽂件的体积略⼤，运⾏略慢，可读性略低。这时候 就是⼀种不错的解决⽅案结论：对于应⽤使⽤ webpack，对于类库使⽤ Rollupwebpack如何解析less?(less-loader、css-loader、style-loade)主要通过less-loader、css-loader、style-loader插件作⽤less-loader：⽤于加载.less⽂件，将less转化为csscss-loader：⽤于加载.css⽂件，将css转化为commonjsstyle-loader: 将样式通过