webpack面试题
# webpack 面试题
简单介绍下 webpack，webpack 的使用场景和基础原理
webpack 如何实现动态加载，webpack 能动态加载 require 引入的模块吗？
说说 webpack proxy 工作原理？为什么能解决跨域?
Import 和 CommonJS 在 webpack 打包过程中有什么不同
A、B 两个条件组件，如何做到 webpack 只打包条件为 true 的组件，false 的组件不打包
webpack 怎么处理内联 css 的
webpack 如何做异步加载
Webpack 抽取公共文件是怎么配置的
import { Button } from 'antd'，打包的时候只打包 button，分模块加载，是怎么做到的
使用 import 时，webpack 对 node_modules 里的依赖会做什么
如何配置把 js、css、html 单独打包成一个文件
如何实现分模块打包（多入口）
如何实现 webpack 持久化缓存
webpack 将 css 合并成一个；
webpack 的摇树对 commonjs 和 es6 module 都生效么，原理是；
webpack 如何处理 es module， 现代浏览器怎么写 esmodule
webpack 的依赖图
说说 module、chunk、bundle、asset 的区别？
chunk 一定是通过入口生成的吗？（不一定，import 动态加载的模块也会作为一个 chunk）
在 webpack 打包构建 AST 以后做了什么
你有了解过 webpack 现在也支持 esm 了吗？
webpack 打 polyfill 都有哪几种方式
import moduleName from 'xxModule'和 import('xxModule')经过 webpack 编译打包后最终变成了什么？在浏览器中是怎么运行的？
路由懒加载的原理是啥，能不能结合 webpack 说一说。
webpack.then 原理
webpack 的入口文件怎么配置，多个入口怎么分割
webpack 增量更新设置； happyPack 组件共享进程设置；
了解 PWA 吗，webpack 怎么做 PWA
monorepo 这种项目有什么好处，具体是如何打包的？
webpack 实现按模块打包和常用第三方包单独打包的具体做法
# webpack 版本
webpack 5 做了哪些优化，Webpack 5 中的 Module Federation 对微前端的意义
webpack4 跟前一个版本有什么区别
# webpack hash
webpack 中 chunkHash 与 contentHash 区别；
Webpack 打包时 Hash 码是怎么生成的？随机值存在一样的情况，如何避免？打包出来的文件加 hash 值有什么用？
webpack 有几种 hash，它们有什么区别？一般你在项目里面是用哪种 hash？
# 拆包
- webpack 怎么做分包？
有了解过 webpack 里面的拆包吗，说一下你的拆包策略
你觉得拆包的意义在哪，结合 http 的缓存详细说下拆包你觉得拆包的意义在哪，结合 http 的缓存详细说下拆包
Dllplugin 好处
# 工具对比
Rollup 和 webpack 区别，Rollup 和 webpack 打包结果有什么异同
说一下 webpack 与 gulp 的区别（源码角度）
与 webpack 类似的工具还有哪些？区别？
# webpack 高级面试题（追问）
webpack 异步加载和分包的原理是什么
# webpack 的编译过程
怎么编译所有的模块的
介绍下 Webpack 的整个生命周期
dev-server 的原理是什么？描述一下它的具体流程
# webpack 常用 loader 与 plugin
loader 与 plugin 区别
loader 和 plugin 在 webpack 哪个打包过程起作用
说说 loader、plugin 的原理？举几个例子
如何替换项目中所有 https=>http? (css 和 js 都得替换，css-loader 和 babel-loader-plugin)
不使用 loader，plugins 会怎么样
是否写过 Loader ?描述一下编写 Loader 的思路？
inlineprepostnormalloader 执行先后顺序是？
plugin 相关
说说 webpack 的 plugin 是怎么获取 hook 入参的？
plugin 中有异步请求会阻塞后面的 plugin 吗？
是否写过 Plugin ?描述一下编写 Plugin 的思路？
请说一下 DIlPlugin 和 DllReferencePlugin 的工作原理
loader 相关：
loader 输入什么，输出什么
loader 有异步的吗？
说一下 webpack 中 css-loader 和 style-loader 的区别，file-loader 和 url-loader 的区别
css-loader 和 file-loader 如何一起工作的？
css-loader 的作用？css 中的路径是如何解析的？不使用 css-loader 行不行
webpack 如何配 sass，需要配哪些 loader，配 css 需要哪些 loader
loader 的执行顺序为什么是后写的先执行
解析 vue-loader 是如何实现
- webpack 处理 image 是用哪个 loader，限制成 image 大小的是...；
babel-loader 实现原理，babel loader 通过什么方式把 es6 转换为 es5
# webpack 的热更新原理
是如何做到在不刷新浏览器的前提下更新页面的
webpack-dev-server 和 dev-middleware、hotmiddleware 的区别，原理能说说吗？
什么时候知道更新完
HMR 原理，你如何设计热模块替换，和前端 router 有什么区别
# webpack 前端优化
webpack 做过哪些优化，开发效率方面、打包策略方面等等
- 如何提高 webpack 的构建速度？
什么是长缓存？在 Webpack 中如何做到长缓存优化？
如何对 bundle 体积进行监控和分析？
为什么 webpack 打包慢？为什么 vite 会比 webpack 快？如果想提高 webpack 速度，应该怎么做？
# tree-shaking
说下 tree-shaking 的原理，tree-shaking 的三个使用场景
tree-shaking 作用，如何才能生效
require 引入的模块 webpack 能做 Tree Shaking 吗？
对 CommonJS 和 ESM 都可以用 tree-shaking 吗