webpack 的 loader 跟 plugin 的区别？

查看答案

loader 主要用来将不同的文件类型转换为 webpack 可以识别的模块，比如 css-loader，就是将 css 转换为 js 模块，babel-loader 就是将 es6 的代码转换成 es5 的代码，vue-loader 将 vue 文件转换为 js 文件，让 webpack 可以处理 vue 文件的代码。

而 plugin 的作用就更大一些，他主要用来扩展 webpack 的功能，让 webpack 在构建过程中能做更多的事情。

比如 htmlWebpackPlugin，可以在打包结束后自动生成一个 html 文件，并自动引入打包后的 js 文件。

cleanWebpackPlugin，可以在打包之前自动清除上一次打包的内容。

webpack 常用的 plugin 和 loader 有哪些？

查看答案

plugin：

• terserPlugin： 用来压缩 js 代码，比如去除 console.log，去除注释等等。

• compressionPlugin： 用来将打包后的文件压缩成 gzip 格式，减少传输的体积，需要服务端配置。

• hardSourceWebpackPlugin： 第一次构建时缓存进系统磁盘中，第二次构建直接从磁盘获取，加快构建速度。

• htmlWebpackPlugin： 在打包后自动生成 html 文件，并且引入打包后的 js 代码。

• cleanWebpackPlugin： 打包时自动清除上一次打包的文件。

loader：

• css-loader： 将 css 转换为 js 模块。

• babelLoader： 将 es6 代码转为 es5。

• sass-loader、less-loader： 将 sass、less 文件转为 css 文件。

• vue-loader： 专门用来处理 Vue 单文件组件。

webpack 和 vite 的区别是什么？

查看答案

首先从启动速度来说，webpack 在启动时会一次性打包所有文件，对于大型项目来说启动较慢，而 vite 利用原生 esModule 的支持，不进行打包，按需加载模块，启动特别快。

webpack 自身就是打包工具，而 vite 是基于 rollup 的，使用 rollup 打包出来的代码更小，速度更快。

webpack 的热更新是整个模块的重新编译，在大型项目中反应较慢，而 vite 因为基于 esModule，可以实现更细粒度的热更新，响应更加及时。

生态方面 webpack 的出现时间较早，比起 vite 生态更加丰富。

webpack 是怎么检査重复依赖的问题

查看答案

webpack 在打包构建的时候会创建一个模块依赖图，它会分析每个导入，通过模块 id 来识别是否已经引入过该模块来避免重复打包。

但是如果依赖路径不同或者版本不同，就有可能出现重复依赖。

webpack 打包流程

查看答案

首先会读取配置文件，然后创建一个 compiler 实例去加载各种插件，比如 htmlWebpackPlugin、clearWebpackPlugin 等等。

然后 webpack 就会从我们配置文件中设置的入口开始分析依赖，每发现一个模块就会通过对应的 loader 进行处理，比如 babel-loader 转换 es6 代码，css-loader 处理 css 文件。这个过程中会维护一个模块的依赖图。

处理完模块后会生成最终的 chunk 和静态资源输出到配置文件的输出目录下面，构建结束。

构建和打包有什么区别？

查看答案

构建是指将源代码转换为可执行代码的过程，而打包是指将多个构建产物合并为一个文件的过程。打包通常是构建的一部分。