1. Webpack

Webpack 是一个打包工具，是一个用于JavaScript应用程序的静态模块打包工具。

当webpack处理JavaScript应用程序时，会构建依赖图（dependency graph），将项目中所需的每一个模块（Module）组合成bundles（捆、束、包），它们均为静态资源，用于展示内容。

配置文件：webpack.config.js。

2. Loader

Loader意指“加载器”，简记为格式转换器，或者理解为“翻译官”。

Webpack 只能理解 JS 和 JSON 文件。Loader让webpack能够处理其他类型的文件（Module），将其他类型的转换为有效的模块，以供应用程序使用。

可以通过规则（正则表达式）匹配文件名（文件格式），使用专门的loader进行转换。

3. 常用的loader举例

Image-loader：加载并压缩图片文件

Babel-loader：把ES6转换成ES5

Css-loader：加载css

Stype-loader：把css代码注入到 JavaScript中，通过DOM操作加载CSS

Vue-loader：加载vue.js单文件组件

4. plugin

Plugin意指“插件”，用于拓展webpack的功能，例如：打包优化、资源管理、注入环境变量。

5. 常见的plugin举例

Webpack-bundle-analyzer：可视化webpack输出文件的体积

Ignore-plugin：忽略部分文件

Html-webpack-plugin：简化html文件创建

6. loader和plugin的区别：

Loader本质是函数，在该函数内对接收到的内容进行转换，返回转换后的结果。因为webpack只能理解JS和JSON，所以loader充当webpack的翻译官；

Plugin是插件，用于拓展webpack的功能。Webpack运行时，plugin监听事件，在合适的时机通过webpack提供的API改变输出结果。

Loader的类型是数组，每一项都是一个Object，内部包含了test（类型文件）、loader、options（参数）等属性。

Plugin的类型是数组，每一项是一个plugin实例，参数通过构造函数传入。

7. Webpack的构建流程

（1）初始化：启动构建，加载plugin，实例化compiler

（2）编译：从入口（entry） 出发，针对每个模块（MOdule）串行调用对应的Loader去翻译文件的内容，再找到该Module依赖的Module，递归地进行编译处理。

（3）输出：将编译后的Module组合成Chunk，将Chunk转换成文件，输出到文件系统中。

8. Webpack开发时，供开发者提升开发效率的插件

Webpack-dashboard：展示打包信息。

Size-plugin：监控资源体积变化，尽早发现问题。

Webpack-merge：提取公共配置，减少重复配置代码。

SMP：分析webpack打包过程中loader和plugin的耗时，找到性能瓶颈。

9. Source map

将编译、打包、压缩后的代码映射回源代码，源码才供调试。

10. 模块打包原理

首先定位，这个问题属于“webpack”范畴。

Webpack为每一个模块创造了一个可以导入、和导出的环境。

代码执行顺序与模块加载顺序一致。

参考资料

Webpack中文文档：概念 | webpack 中文文档 | webpack中文文档 | webpack中文网童欧巴：「吐血整理」再来一打Webpack面试题 - 掘金 (juejin.cn)

相关文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：