前端面试题整理-webpack

实现前端模块化，将多个 js，打包成一个 bundle.js (其他类型文件交由各自的 loader 处理)

0. 如何理解前端工程化？

前端工程化是指在前端开发中应用工程化的思想和方法，以提升开发效率、代码质量和项目可维护性。它涉及多个方面，以下是一些关键点：

• 模块化：将代码分解成独立的模块，每个模块负责特定的功能，便于管理和复用。常见的模块化规范有 CommonJS、AMD 和 ES6 模块。
• 自动化构建：使用工具（如 Webpack、Gulp、Grunt 等）来自动化构建流程，包括代码压缩、图片优化、样式处理等，以提高开发效率和性能。
• 版本管理：利用 Git 等版本控制工具来管理代码变更，支持团队协作和历史追溯。
• 代码规范：制定和遵循统一的代码风格和规范（如 ESLint、Prettier），提高代码的可读性和一致性。
• 测试：实施单元测试、集成测试和端到端测试，确保代码的正确性和可靠性。常用的测试框架有 Jest、Mocha 和 Cypress 等。
• 持续集成与持续部署（CI/CD）：自动化测试和部署流程，使得代码在经过验证后能够迅速上线，降低发布的风险。
• 性能优化：通过代码分割、懒加载、缓存等技术，优化前端性能，提高用户体验。
• 文档和沟通：良好的文档和团队沟通机制，确保团队成员对项目的理解和协作。

1. webpack 了解吗？大概介绍一下

一种打包工具，实现前端模块化，将多个 js，打包成一个 bundle.js (其他类型文件交由各自的 loader 处理)。
其中核心概念：
entry: 定义入口 js 文件，一般单页项目定义一个，多页项目可传递数组
output: 定义输出文件的格式和目录
module: loader 定义的地方，常见的 jsx 处理用 babel-loader, vue 用 vue-loader, less 用 less-loader.(css 相对特殊，需要三个 loader 分别进行处理。各司其职，功能最小化)
plugin:
html-webpack-plugin, 在 html 文件中自动引入 js 文件
clean-webpack-plugin，在下次构建前清理上一次的打包产物

以 entry 作为入口，对代码静态分析 import 了哪些文件，通过不同的 loader 对不同后缀的文件处理，最终打包到一起。在最后的打包过程中，插件可以在适当的时机进行额外的操作。

2. loader 了解吗？常见的 loader 有哪些？

loader是从后往前执行，谁先定义后执行。
loader 本质是在 webpack 处理文件前，进行一次转换，可以是对新js语法的兼容(babel)，也可以是对 css 文件的处理(css-loader, style-loader)
webpack 本身只能处理 js 文件，所以需要各种 loader 来对其他类型的文件进行处理。也正是因为 loader 机制的设定，webpack 的能力也非常便于扩展。

常见load