一 讲一下Webpack ?
Webpack 是一个前端打包工具,它从入口文件开始构建项目,通过分析模块之间的依赖关系,把项目中的js,css,图片等资源当当作模块进行处理,最终打包生成浏览器可以运行的静态文件,在这个过程中,Webpack可以通过Loader处理不同类型的资源,通过plugin扩展构建能力,并对代码进行拆分,压缩,等优化,以提升项目的加载性能和开发效率
二 Webpack 都有哪些配置?
Webpack 的配置主要可以分为几大核心部分:
1. entry 入口
用来指定从哪个文件开始构建依赖,一般是项目的主入口文件
2.output 输出
用来配置打包后的文件输出到哪里,以及生成的文件名规则
3. module
主要用于配置Loader,告诉Webpack不同类型的文件(比如js,CSS,图片)应该用什么方式去处理
4. plugins.
用于扩展Webpack的功能,比如生成HTML,清理旧文件,抽离CSS,定义环境变量
5.mode
用来区分开发环境和生产环境,Webpack会根据不同模式自启动不同的优化策略
在实际项目中还会经常见到:
- resolve: 配置模块解析规则,比如别名alias,文件后缀
- devServer: 开发环境配置,本地服务和热更新
- optimization: 打包优化相关配置,比如代码拆分,压缩
一句话总结:
webpack 的配置主要围绕入口,输出,模块处理,功能扩展和环境模式展开,用来控制整个构建和导报过程
三 常用的Loader有哪些？ 你用过哪些？
babel-loader： 把ES6+代码转换成兼容性更好的js
这个我在项目里是必用的,主要配合Babel做语法转换
css-Loader: 解析css文件中的@import 和url()
style-loader: 把CSS通过<Style>标签注入到页面
less-loader/Sass-loader: 把Less,Sass转成CSS
eslint-loader
vue-loader : 加载Vue.js 单文件组件
处理图片/字体/多媒体Loader
四 有哪些常见的Plugin？ 你用过哪些Plugin
HtmlWebpackPlugin : 用来生成HTML文件,并自动把打包后的js,css注入到HTML中
CleanWebpackPlugin: 在每次打包前清空输出目录,避免旧文件残留
Webpack5里也可以直接用output.clean: true
MiniCssExtractPlugin 把CSS从JS中抽离成单独的CSS文件,适合生产环境
DefiunePlugin: 用来定义环境变量,常用来区分开发和生产环境
TreserPlugin : JS压缩,Webpack内置在production
CssMinimizerPlugin(CSS压缩)
WebpackBundleAnalyzer 可视化分析打包体积,找出体积大的依赖
HotModuleReplacementPlugin 内置 实现模块热更新
五. Loader 和Plugin 的区别
1. Loader : 用来处理某一类的文件, 作用是把Webpack不能处理的资源,转换成它能识别的模块, 本质是一个函数
2.PLugin: 扩展Webpack的整体能力,可以在打包不同阶段执行逻辑
Loader负责把不同类型的文件转换成Webpack能处理的模块,而Plugin通过参与Webpack的构建生命周期,扩展和优化整个打包过程
六. webpack 构建流程简单说一下
1. 从入口文件开始
Webpack 根据entry 找到项目的入口文件
2. 分析依赖关系
读取入口文件的内容,找出它依赖了哪些模块,然后再递归分析这些以来模块
3. 处理模块内容
在分析每个模块时,Webpack会根据配置的loader,对不同类型的文件,比如JS,CSS,图片,进行转换处理
4. 生成打包结果
在所有模块处理完成后,Webpack会把这些模块按照依赖关系组合在一起,生成最终的bundle文件
5. 输出到指定目录
最后根据output配置,把打包后的文件输出到指定目录
总结:
Webpack从入口文件出发,分析模块依赖,使用Loader处理不同类型的资源,最终将所有模块打包并输出到指定目录
七. 使用webpack 开发时,你用过哪些可以提高效率的插件?
- webpack-dashboard 更有好的展示相关包的信息
-webpack-merage 提取公共配置,减少重复配置代码
-speed-measure-webpack-plugin分析loader和plugin的耗时,分析构建过程中的性能
-size-plugin 监控资源体积变化,尽早发现问题
-HotModuleReplacementPlugin 模块热替换
八. 如何提升Webpack的构建速度
1.减少要处理的文件范围
给loader加include/exclude 只处理src,不处理node_modules
2.开启缓存
babel-loader 开启 cacheDirectory
Webpack5 用 cache: { type: 'filesystem' } 做持久化缓存（下次构建复用结果）
3.多进程并行
让耗时的loader并行跑
小项目不一定更快,因为开线程本身也有成本
4. tree shaking
九. webpack 和Vite的区别
1.启动方式
webpack: 启动开发环境前,先把整个项目打包一遍,项目越大,启动越慢
Vite: 基于浏览器原生ES Module
2. 开发体验
webpack: 热更新依赖打包结果,项目大时,改一次代码,等待时间长
Vite: 模块级热更新,只更新修改的文件,热更新非常快
3.构建原理不同
webpack: 把所有模块分析依赖,打包成bundle 浏览器只加载最终产物
Vite: 开发环境: 利用浏览器原生ES Module 不打包,直接加载源码,生产环境: 仍然会打包
4. 配置和使用
webpack: 功能全面,配置灵活,适合老项目,复杂工程
Vite: 配置简单,上手快,适合新项目,Vue/React项目,追求开发体验
十. Vite 能完全替代 Webpack 吗？
不能完全替代,但很多新项目可以优先选Vite
能替代的场景:
(大多数业务项目): 常见Vue/React SPA, 一般的资源处理,常规代码分割,现代前端工程,Vite体验更好,上手更快
不太好替代的场景(Webpack):
- 特别复杂的构建链路(大量自定义loader/plugin,非常个性化的产物组织)
- 非常老的历史项目(依赖老库,CJS多,兼容目标更老)
- 某些企业内部构建体系深度绑定Webpack(周边工具,脚手架,规范)