webpack 5 默认移除 node.js 内置模块 polyfill，bootstrap 5 依赖 @popperjs/core 但尝试加载已弃用的 popper.js，导致 module not found；需手动安装 @popperjs/core 并显式导入 bootstrap.bundle.js 或按需引入。
Bootstrap 5 能和 Webpack 配合，但默认会报错；不是你写错了，是 Webpack 5 移除了对 Node.js 内置模块的自动 polyfill，而 Bootstrap 5 依赖 @popperjs/core —— 必须手动装、显式配、按需引。
为什么 import 'bootstrap' 直接报 module not found: error: can't resolve 'popper.js'
Webpack 5 不再自动提供 path、fs、crypto 等 Node.js 内置模块的 polyfill，而 bootstrap 的 ES 模块入口（dist/js/bootstrap.esm.js）内部仍通过条件判断尝试加载 popper.js（旧名），实际应指向 @popperjs/core。这不是路径写错，是生态演进断层。
解决办法只有两个关键动作：
- 运行
npm install @popperjs/core（必须装，不能只装popper.js） - 确保你的
import 'bootstrap'实际解析到的是已预打包的bootstrap.bundle.js或显式指定 ESM 入口：import 'bootstrap/dist/js/bootstrap.bundle.min.js' - 若坚持用纯 ESM 方式（如自定义 Popper 配置），需在 JS 中手动引入：
import { Tooltip } from 'bootstrap'; import '@popperjs/core';
Webpack 中如何正确加载 Bootstrap 的 CSS/SCSS
样式不生效，90% 是因为没配 loader，而不是 import 路径不对。Webpack 默认完全忽略 .css 和 .scss 文件。
必须安装并配置：
npm install --save-dev css-loader style-loader sass-loader sass mini-css-extract-plugin- 在
webpack.config.js的module.rules中添加两条规则（顺序不能颠倒）：{ test: /\.(scss|sass|css)$/, use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader'] } - 开发时用
style-loader注入<style></style>标签；生产环境必须换MiniCssExtractPlugin.loader，否则 CSS 会打进 JS bundle，首屏渲染阻塞更严重 - 若用 SCSS 自定义主题，别写
@import 'bootstrap'；改用：@import '~bootstrap/scss/functions'; @import '~bootstrap/scss/variables'; @import '~bootstrap/scss/mixins';
图标字体或 SVG 资源 404 怎么办
Bootstrap Icons（如 bootstrap-icons.woff2）被引用后浏览器返回 404，本质是 Webpack 没配置字体/资源处理规则，导致这些文件未被复制进输出目录或未生成正确 URL。
补上 asset handler 即可：
- Webpack 5+ 推荐用内置
asset类型，加一条 rule：{ test: /\.(woff2?|eot|ttf|otf)$/i, type: 'asset/resource' } - 确保
public/下的静态字体文件不会被重复拷贝（避免和asset/resource冲突） - 检查 CSS 中字体路径是否为相对路径（如
url("./fonts/bootstrap-icons.woff2")），Webpack 默认不解析 CSS 内联 URL 的别名（~），要用resolve.alias或改用绝对路径
模块化打包的优缺点很现实
优点是真快：改一行 JS/CSS，热更新秒刷；Tree Shaking 能剔除未用的组件（比如只用了 Modal，就不会打包 Toast）；CSS 提取后可并行加载，首屏更快。
缺点也很硬核：
- 配置项多，一个 loader 漏了或顺序反了，就静默失效（比如忘了
css-loader，控制台零报错但样式全丢） - 多版本冲突常见：项目里已有
@popperjs/core@2.11，又因某 UI 库间接装了@popperjs/core@2.12，Webpack 会打两份，体积翻倍 - 图标字体路径、data-url 编码、CSS scope 等细节，在不同 loader 组合下行为不一致，得实测验证
最易被忽略的一点：Webpack 的 resolve.alias 和 resolve.modules 若配错，会导致 import 'bootstrap' 解析到 node_modules 里的源码而非 dist，进而触发一堆构建时编译错误——这种问题没有明确报错，只会卡在「样式没加载」「JS 报 undefined」的表象里。
