前端工程化常见问题总结

1. webpack 配置有哪些 ?

Webpack的配置主要包括以下⼏个部分 ：

. entry。指定Webpack打包的⼊⼝⽂件 ，可以是单个或多个JavaScript⽂件。这个配置决定了 Webpack从哪个模块开始⽣成依赖关系图。

· output。设置Webpack打包后输出的⽬录和⽂件名称 ，包括path、filename和publicPath等。

. module。 配置了不同的loaders来处理不同的模块 ，例如 ，对于CSS⽂件 ，可以使⽤css-loader和 style-loader。

· resolve。设置Webpack如何解析模块依赖 ，包括别名、扩展名等。

· plugins。使⽤不同的插件可以增强Webpack的功能 ，例如 ，使⽤html-webpack-plugin可以 将打包后的js⽂件⾃动引⽤到HTML⽂件中。

· devServer。提供了⼀个简单的web服务器和实时重载功能 ，可以通过 devServer.contentBase、devServer.port、devServer.proxy等进⾏配置。

· optimization。 可以使⽤optimization.splitChunks和optimization.runtimeChunk配置代码拆 分和运⾏时代码提取等优化策略。

· externals。⽤于配置排除打包的模块 ，例如 ，可以将jQuery作为外置扩展 ，避免将其打包到应 ⽤程序中。

· devtool。配置source-map类型。

· context。webpack使⽤的根⽬录 ，string类型必须是绝对路径。

· target。指定Webpack编译的⽬标环境。

· performance。输出⽂件的性能检查配置。

· noParse。不⽤解析和处理的模块。

· stats。控制台输出⽇志控制。

2. 有哪些常见的 Loader 和 Plugin ？

Loader:

. babel-loader ：将ES6+的代码转换成ES5的代码。

. css-loader ：解析CSS⽂件 ，并处理CSS中的依赖关系。 . style-loader ：将CSS代码注⼊到HTML⽂档中。

. file-loader ：解析⽂件路径 ，将⽂件赋值到输出⽬录 ，并返回⽂件路径。

. url-loader ：类似于file-loader ，但是可以将⼩于指定⼤⼩的⽂件转成base64编码的Data URL格 式

. sass-loader ：将Sass⽂件编译成CSS⽂件。

. less-loader ：将Less⽂件编译成CSS⽂件。

· postcss-loader ：⾃动添加CSS前缀 ，优化CSS代码等。

. vue-loader ：将Vue单⽂件组件编译成JavaScript代码。 Plugin:

. HtmlWebpackPlugin ：⽣成HTML⽂件 ，并⾃动将打包后的javaScript和CSS⽂件引⼊到HTML⽂ 件中。

· CleanWebpackPlugin ：清除输出⽬录。

· ExtractTextWebpackPlugin ：将CSS代码提取到单独的CSS⽂件中。 · DefinePlugin ：定义全局变量。

· UglifyJsWebpackPlugin ：压缩JavaScript代码。

· HotModuleReplacementPlugin ：热模块替换 ，⽤于在开发环境下实现热更新。

· MiniCssExtractPlugin ：与ExtractTextWebpackPlugin类似 ，将CSS代码提取到单独的CSS⽂件 中。

· BundleAnalyzerPlugin ：分析打包后的⽂件⼤⼩和依赖关系。

3. Loader 和Plugin 的区别

功能不同 ：

Loader本质是⼀个函数 ，它是⼀个转换器。webpack只能解析原⽣js⽂件 ，对于其他类型⽂件就需要 loade进⾏转换。

Plugin它是⼀个插件 ，⽤于增强webpack功能。webpack在运⾏的⽣命周期中会⼴播出许多事件， Plugin 可以监听这些事件 ，在合适的时机通过 webpack 提供的 API 改变输出结果 。

⽤法不同 ：

Loader的配置是在module.rules下进⾏。 类型为数组 ，每⼀项都是⼀个 Object ，⾥⾯描述了对于什 么类型的⽂件（ test ） ，使⽤什么加载( loader )和使⽤的参数（ options ） 。

Plugin的配置在plugins下。类型为数组 ，每⼀项是⼀个 Plugin 的实例 ，参数都通过构造函数传⼊。

4. webpack 的构建流程

Webpack的构建流程主要包括以下⼏个步骤 ：

1. 初始化参数。解析Webpack配置参数 ，合并Shell传⼊和webpack.config.js⽂件配置的参数， 形成最终的配 置结果。

2. 开始编译。使⽤上⼀次得到的参数初始化compiler对象 ，注册所有配置的插件 ，插件监听 Webpack构建⽣命周期的事件节点 ，做出相应的反应 ，执⾏对象的run⽅法开始执⾏编译。

3. 确定⼊⼝ 。从配置的entry⼊⼝ ，开始解析⽂件构建AST语法树 ，找出依赖 ，递归下去。

4. 编译模块。递归中根据⽂件类型和loader配置 ，调⽤所有配置的loader对⽂件进⾏转换 ，再找 出该模块依赖的模块 ，再递归本步骤直到所有⼊⼝依赖的⽂件都经过了本步骤的处理。

5. 完成模块编译。在经过第四步使⽤Loader翻译完所有模块后 ，得到了每个模块被翻译后的最终内 容以及它们之间的依赖关系。

6. 输出资源。根据⼊⼝和模块之间的依赖关系 ，组装成⼀个个包含多个模块的Chunk ，再把每个 Chunk转换成单独的⽂件加⼊到输出列表 ，这步是可以修改输出内容的最后机会。

7. 输出完成。在确定好输出内容后 ，根据配置确定输出的路径和⽂件名 ，把⽂件内容写⼊到⽂件系统。

这个流程是⼀个串⾏的过程 ，Webpack的运⾏流程是⼀个串⾏的过程 ，它的⼯作流程就是将各个插件 串联起来。在运⾏过程中会⼴播事件 ，插件只需要监听它所关⼼的事件 ，就能加⼊到这条Webpack机 制中 ，去改变Webpack的运作 ，使得整个系统扩展性良好。

5. 什么是Webpack 的热更新（Hot Module Replacement ） ？原理是什么？

Webpack的热更新 ，在不刷新页⾯的前提下 ，将新代码替换掉旧代码。

HRM的原理实际上是 webpack-dev-server（WDS）和浏览器之间维护了⼀个websocket服务。 当本 地资源发⽣变化后 ，webpack会先将打包⽣成新的模块代码放⼊内存中 ，然后WDS向浏览器推送更新 ，并附带上构建时的hash ，让客户端和上⼀次资源进⾏对⽐ 。

6. 什么是Code Splitting

Code Splitting代码分割 ，是⼀种优化技术。它允许将⼀个⼤的chunk拆分成多个⼩的chunk ，从⽽实 现按需加载 ，减少初始加载时间 ，并提⾼应⽤程序的性能 。

在Webpack中通过optimization.splitChunks配置项来开启代码分割

7. Webpack 的Source Map 是什么？如何配置⽣成Source Map ？

Source Map是⼀种⽂件 ，它建⽴了构建后的代码与原始源代码之间的映射关系。通常在开发阶段开启 ，⽤来调试代码 ，帮助找到代码问题所在。

在Webpack配置⽂件中的devtool选项中指定devtool: 'source-map'来开启。

8. Webpack 的Tree Shaking 原理

Webpack的Tree Shaking是⼀个利⽤ES6模块静态结构特性来去除⽣产环境下不必要代码的优化过 程。其⼯作原理在于 ：

1. 当Webpack分析代码时 ，它会标记出所有的import语句和export语句。

2. 然后 ， 当Webpack确定某个模块没有被导⼊时 ，它会在⽣成的bundle中排除这个模块的代码。

3. 同时 ，Webpack还会进⾏递归的标记清理 ，以确保所有未使⽤的依赖项都不会出现在最终的 bundle中。

为了启⽤Tree Shaking ，需要在webpack配置⽂件中添加如下设置 ：

javascriptmodule .exports = { // ... optimization: { usedExports: true, concatenateModules: true, minimize: true, }, // . . .};

确保你使⽤的是ES6模块语法（即import和export） ，因为只有这样才能让Tree Shaking发挥作⽤ 。

9. 如何提⾼webpack 的打包速度

· 利⽤缓存 ：利⽤Webpack的持久缓存功能 ，避免重复构建没有变化的代码

. 使⽤多进程/多线程构建 ：使⽤thread-loader、 happypack等插件可以将构建过程分解为多个 进程或线程

· 使⽤DllPlugin和HardSourceWebpackPlugin ： DllPlugin可以将第三⽅库预先打包成单独的⽂ 件 ，减少构建时间。 HardSourceWebpackPlugin可以缓存中间⽂件 ，加速后续构建过程

. 使⽤Tree Shaking: 配置Webpack的Tree Shaking机制 ，去除未使⽤的代码 ，减⼩⽣成的⽂件 体积

. 移除不必要的插件: 移除不必要的插件和配置 ，避免不必要的复杂性和性能开销

10. 如何减少打包后的代码体积

. 代码分割（Code Splitting） ：将应⽤程序的代码划分为多个代码块 ，按需加载

· Tree Shaking ：配置Webpack的Tree Shaking机制 ，去除未使⽤的代码

· 压缩代码 ：使⽤⼯具如UglifyJS或Terser来压缩JavaScript代码

· 使⽤⽣产模式 ：在Webpack中使⽤⽣产模式 ，通过设置mode: 'production'来启⽤优化

· 使⽤压缩⼯具 ：使⽤现代的压缩⼯具 ，如Brotli和Gzip ，来对静态资源进⾏压缩

. 利⽤CDN加速 ：将项⽬中引⽤的静态资源路径修改为CDN上的路径 ，减少图⽚ 、字体等静态 资源等打包

11. vite ⽐webpack 快在哪⾥

( ⼀） 、开发模式的差异

在开发环境中 ， Webpack 是先打包再启动开发服务器 ，⽽ Vite 则是直接启动 ，然后再按需编译依赖⽂ 件。（ ⼤家可以启动项⽬后检查源码 Sources 那⾥看到）

这意味着 ， 当使⽤ Webpack 时 ，所有的模块都需要在开发前进⾏打包 ，这会增加启动时间和构建时间。

⽽ Vite 则采⽤了不同的策略 ，它会在请求模块时再进⾏实时编译 ，这种按需动态编译的模式极⼤地缩 短了编译时间 ，特别是在⼤型项⽬中 ，⽂件数量众多 ， Vite 的优势更为明显。

Webpack 启动

Vite 启动

（⼆） 、对ES Modules 的⽀持

现代浏览器本⾝就⽀持 ES Modules ，会 主动发起 请求去获取所需⽂件。Vite充分利⽤了这⼀点 ，将开发 环境下的模块⽂件直接作为浏览器要执⾏的⽂件 ，⽽不是像 Webpack 那样 先打包 ，再交给浏览器执⾏ 。这种⽅式减少了中间环节 ，提⾼了效率。

什么是ES Modules ？

通过使⽤ export 和 import 语句 ，ES Modules 允许在浏览器端导⼊和导出模块。

当使⽤ ES Modules 进⾏开发时 ，开发者实际上是在构建⼀个 依赖关系图 ，不同依赖项之间通过导⼊语 句进⾏关联。

主流浏览器（ 除IE外）均⽀持ES Modules ，并且可以通过在 script 标签中设置 type="module" 来加载模块。默认情况下 ，模块会延迟加载 ，执⾏时机在⽂档解析之后 ，触发DOMContentLoaded事件前。

(3) 、底层语⾔的差异

Webpack 是基于 Node.js 构建的 ，⽽ Vite 则是基于 esbuild 进⾏预构建依赖。esbuild 是采⽤ Go 语 ⾔编写的 ，Go 语⾔是 纳秒 级别的 ，⽽ Node.js 是 毫秒 级别的。 因此 ，Vite 在打包速度上相⽐Webpack 有 10-100 倍的提升。

什么是预构建依赖？

预构建依赖通常指的是在项⽬ 启动或构建 之前 ，对项⽬中所需的依赖项进⾏预先的 处理或建 。这样做的好 处在于，当项⽬实际运⾏时，可以 直接使⽤ 这些已经预构建好的依赖 ，⽽⽆需再进⾏实时的编译或构建 ，从⽽提⾼了应⽤程序的运⾏速度和效率。

(4) 、热更新的处理

在 Webpack 中 ，当⼀个模块或其依赖的模块内容改变时 ，需要 重新编译 这些模块。

⽽在 Vite 中 ，当某个模块内容改变时 ，只需要让浏览器 重新请求 该模块即可 ，这⼤⼤减少了热更新的时间。