Webpack 5 默认不自动 polyfill Node.js 内置模块，导致 Bootstrap 5 因依赖 @popperjs/core 而报错；需显式安装该包、正确导入 CSS/JS bundle、配置 CSS/SASS 加载器、处理图标字体资源，并避免重复引入 Popper。
Webpack 5 默认不识别 Bootstrap 的 require 和 import 方式
bootstrap 5 官方推荐用 es 模块方式导入，但如果你直接 import 'bootstrap'，webpack 5 可能报错找不到 bootstrap/dist/js/bootstrap.bundle.js 或提示 module not found: error: can't resolve 'popper.js'——这不是你配错了路径，而是 webpack 5 移除了对 node.js 内置模块的自动 polyfill，而 bootstrap 4/5 都依赖 popper.js（或 @popperjs/core）。
实操建议：
- 必须显式安装
@popperjs/core（Bootstrap 5 已弃用popper.js）：npm install bootstrap @popperjs/core
- 确保
import 'bootstrap'指向的是已打包好的 bundle：import 'bootstrap/dist/css/bootstrap.min.css';<br>import 'bootstrap/dist/js/bootstrap.bundle.min.js';
- 如果用 SASS 自定义主题，别直接
@import 'bootstrap'；先npm install bootstrap，再在 SCSS 中写：@import '~bootstrap/scss/functions';<br>@import '~bootstrap/scss/variables';<br>@import '~bootstrap/scss/mixins';<br>@import '~bootstrap/scss/root';
Webpack 配置里漏掉 CSS/SASS 加载器，样式完全不生效
Webpack 默认不处理 .css 或 .scss 文件。即使你写了 import 'bootstrap/dist/css/bootstrap.min.css'，没配 css-loader + style-loader（或 MiniCssExtractPlugin），样式不会进 DOM，控制台也几乎不报错——这是最隐蔽的“失效”原因。
实操建议：
- 装必要 loader：
npm install --save-dev css-loader style-loader sass-loader sass mini-css-extract-plugin
- 在
module.rules中加两条规则（顺序不能反）：{<br> test: /\.(css|sass|scss)$/,<br> use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader']<br>} - 开发时用
style-loader注入<style></style>标签；生产环境务必换MiniCssExtractPlugin.loader，否则 CSS 会打进 JS bundle，影响首屏加载。
Bootstrap 图标（Bootstrap Icons）引入后显示为方块或问号
图标字体文件（如 bootstrap-icons.woff2）没被 Webpack 正确解析和输出，浏览器请求 404，就会渲染成空白或方块。这不是 Bootstrap 问题，是 Webpack 对字体、图片等静态资源的处理缺失。
实操建议：
- Bootstrap Icons 推荐用 SVG 方式引入（更可靠）：
import { BootstrapIcons } from 'bootstrap-icons/font/bootstrap-icons.css';<br>// 或单个图标：<br>import 'bootstrap-icons/icons/heart-fill.svg'; - 如果坚持用字体方式，得配
asset类型 loader：{<br> test: /\.(woff|woff2|eot|ttf|otf)$/i,<br> type: 'asset/resource'<br>} - 检查生成目录：字体文件应出现在
dist/fonts/或根目录下；若路径不对，在output.publicPath或css-loader的url选项里调整前缀。
使用 bootstrap.bundle.js 后仍报 Popper is not defined
这个错误只在你手动引入了 bootstrap.js（非 bundle 版）且没单独引入 Popper 时出现。但更常见的情况是：你用了 bundle 版，却在代码里又写了 import '@popperjs/core'，导致 Webpack 打包两份 Popper，破坏了 bundle 内部的依赖绑定。
实操建议：
- 只用
bootstrap.bundle.min.js就够了，它已内置 Popper；不要额外import '@popperjs/core'。 - 检查是否有其他第三方库（比如某些 tooltip 插件）偷偷引入了旧版 Popper，造成冲突；可临时加
console.log(window.Popper)看是否被覆盖。 - 如果必须用非 bundle 版（例如要 treeshake），则必须按顺序引入：
import '@popperjs/core';<br>import 'bootstrap/js/dist/util';<br>import 'bootstrap/js/dist/dropdown'; // 按需引入
真正麻烦的不是配置本身，而是 Bootstrap 的模块化粒度和 Webpack 的模块解析机制之间存在几处隐性耦合点——比如 ~ 别名是否生效、resolve.alias 是否覆盖了 node_modules 路径、甚至 package.json 里的 exports 字段是否干扰了入口解析。这些地方不出错则已，一出就是白屏或部分功能失灵，很难一眼定位。
