前端面试题整理-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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值