前端面试题《webpack&打包构建&项目优化》

webpack插件的基本组成 

• 一个具名 JavaScript 函数；

• 在它的原型上定义 apply 方法；

• 指定一个触及到 Webpack 本身的事件钩子；

• 操作 Webpack 内部的实例特定数据；

• 在实现功能后调用 Webpack 提供的 callback。

一个基本插件

class HelloWorldPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('Hello World Plugin', (
      stats /* 在 hook 被触及时，会将 stats 作为参数传入。*/
    ) => {
      console.log('Hello World!');
    });
  }
}
module.exports = HelloWorldPlugin;

webpack与 vite 的不同， vite的速度提升在哪里

• webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
• 而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。
• 由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
• 由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
• 在HMR（热更新）方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
• 当需要打包到生产环境时，vite使用传统的rollup（也可以自己手动安装webpack来）进行打包，因此，vite的主要优势在开发阶段。另外，由于vite利用的是ES Module，因此在代码中（除了vite.config.js里面，这里是node的执行环境）不可以使用CommonJS

rollup和webpack的区别？

简单的来说rollup是一个Js模块打包器，可以将小块代码编译成大块复杂的代码。现在已经有很多类库都在使用 rollup 进行打包了，比如：react, vue, preact, three.js,moment, d3 等。
优点：小巧而专注

   特性:
       rollup 所有资源放同一个地方，一次性加载,利用 tree-shake特性来  剔除未使用的代码，减少冗余
       webpack 拆分代码、按需加载  webpack2已经逐渐支持tree-shake
   rollup:
     1.打包你的 js 文件的时候如果发现你的无用变量，会将其删掉。
     2.可以将你的 js 中的代码，编译成你想要的格式
   webpack:
    1.代码拆分
    2.静态资源导入（如 js、css、图片、字体等）
    拥有如此强大的功能，所以 webpack 在进行资源打包的时候，就会产生很多冗余的代码。

项目（特别是类库）只有 js，而没有其他的静态资源文件，使用 webpack 就有点大才小用了，因为 webpack bundle 文件的体积略大，运行略慢，可读性略低。这时候 rollup就是一种不错的解决方案
结论：对于应用使用 webpack，对于类库使用 Rollup

webpack如何解析less?(less-loader、css-loader、style-loade)

主要通过less-loader、css-loader、style-loader插件作用

less-loader：用于加载.less文件，将less转化为css

css-loader：用于加载.css文件，将css转化为commonjs

style-loader: 将样式通过