想直接跳到结尾吗？ 可以从 twbs/examples 仓库 下载本指南的源代码和可运行示例。
使用 AI 编程代理？ 将它指向我们的 bootstrap-webpack 技能 来自动化此设置。查看 AI 了解所有可用技能。
什么是 Webpack？
Webpack 是一个 JavaScript 模块打包器，它处理模块及其依赖关系以生成静态资源。它简化了管理具有多个文件和依赖关系的复杂 web 应用程序的过程。
设置
我们正在从零开始构建一个使用 Bootstrap 的 Webpack 项目，因此在真正开始之前，需要一些前提条件和初步步骤。本指南要求你已安装 Node.js，并对终端有一定的了解。
创建一个项目文件夹并设置 npm。 我们将创建
my-project文件夹并使用npm初始化-y避免它向我们提出所有互动问题的论点。mkdir my-project && cd my-project npm init -y安装 Webpack。 接下来我们需要安装我们的 Webpack 开发依赖：
webpack对于 Webpack 的核心，webpack-cli这样我们就可以从终端运行 Webpack 命令，并且webpack-dev-server这样我们就可以运行本地开发服务器。此外，我们还将安装html-webpack-plugin能够存储我们的index.html在src目录而不是默认的dist一。我们使用--save-dev表示这些依赖项仅用于开发而不是用于生产。npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin安装 Bootstrap。 现在我们可以安装 Bootstrap。由于我们的一些组件依赖它们，我们还将安装 Floating UI 和 Vanilla Calendar Pro。如果你不打算使用菜单、弹出框或工具提示，可以省略 Floating UI。如果你不打算使用日期选择器，可以省略 Vanilla Calendar Pro。
npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro安装额外的依赖项。 除了 Webpack 和 Bootstrap，我们还需要一些额外的依赖项，以便使用 Webpack 正确导入和打包 Bootstrap 的 CSS 和 JS。这些依赖项包括 Sass、一写加载器，以及 Autoprefixer。
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
现在我们已经安装了所有必要的依赖项，我们可以开始创建项目文件并导入 Bootstrap 了。
项目结构
我们已经创建了 my-project 文件夹并初始化了 npm。现在我们还将创建我们的 src 和 dist 文件夹，以完善项目结构。从 my-project 运行以下命令，或手动创建下面显示的文件夹和文件结构。
mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss webpack.config.js
完成后，你的完整项目应该看起来像这样：
my-project/
├── src/
│ ├── js/
│ │ └── main.js
│ ├── scss/
│ │ └── styles.scss
│ └── index.html
├── package-lock.json
├── package.json
└── webpack.config.js
此时，一切都已到位，但 Webpack 无法工作，因为我们还没有填写我们的 webpack.config.js。
配置 Webpack
在安装了依赖项并且我们的项目文件夹准备好可以开始编码之后，我们现在可以配置 Webpack 并在本地运行我们的项目。
打开
webpack.config.js在你的编辑器中。 由于它是空白的，我们需要向其中添加一些模板配置，以便我们可以启动服务器。配置的这一部分告诉 Webpack 去哪里查找我们项目的 JavaScript，以及将编译后的代码输出到哪里（dist），以及开发服务器应该如何运行（从dist带热重载的文件夹)。'use strict' const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: './src/js/main.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, devServer: { static: path.resolve(__dirname, 'dist'), port: 8080, hot: true }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }接下来我们填写我们的
src/index.html. 这是 Webpack 将在浏览器中加载的 HTML 页面，以使用我们将在后续步骤中添加到其中的打包 CSS 和 JS。在我们可以这样做之前，我们必须给它一些内容来渲染并包含output上一步的 JS。<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap w/ Webpack</title> </head> <body> <div class="container py-4 px-3 mx-auto"> <h1>Hello, Bootstrap and Webpack!</h1> <button class="btn-solid theme-primary">Primary button</button> </div> </body> </html>我们在这里加入了一点 Bootstrap 样式
div class="container"和<button>这样我们就可以看到 Bootstrap 的 CSS 何时被 Webpack 加载。现在我们需要一个 npm 脚本来运行 Webpack。 打开
package.json并添加start如下所示的脚本（你应该已经有测试脚本）。我们将使用这个脚本来启动本地 Webpack 开发服务器。你也可以添加一个build下面显示的脚本用于构建你的项目。{ // ... "scripts": { "start": "webpack serve", "build": "webpack build --mode=production", "test": "echo \"Error: no test specified\" && exit 1" }, // ... }最后，我们可以启动 Webpack。 从
my-project在你的终端中的文件夹里，运行那个新添加的 npm 脚本：npm start
在本指南的下一部分也是最后一部分中，我们将设置 Webpack 加载器，并导入所有的 Bootstrap CSS 和 JavaScript。
导入 Bootstrap
将 Bootstrap 导入 Webpack 需要我们在第一部分安装的加载器。我们已经用 npm 安装了它们，但现在需要配置 Webpack 来使用它们。
设置加载器于
webpack.config.js. 你的配置文件现在已完成，并应与下面的片段相匹配。这里唯一的新部分是module部分。'use strict' const path = require('path') const autoprefixer = require('autoprefixer') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: './src/js/main.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, devServer: { static: path.resolve(__dirname, 'dist'), port: 8080, hot: true }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], module: { rules: [ { test: /\.(scss)$/, use: [ { // Adds CSS to the DOM by injecting a `<style>` tag loader: 'style-loader' }, { // Interprets `@import` and `url()` like `import/require()` and will resolve them loader: 'css-loader' }, { // Loader for webpack to process CSS with PostCSS loader: 'postcss-loader', options: { postcssOptions: { plugins: [ autoprefixer ] } } }, { // Loads a SASS/SCSS file and compiles it to CSS loader: 'sass-loader' } ] } ] } }这里是我们为什么需要所有这些加载器的回顾。
style-loader将 CSS 注入到一个<style>元素在<head>HTML 页面中的css-loader有助于使用@import和url(),postcss-loader是 Autoprefixer 所必需的，并且sass-loader允许我们使用 Sass。现在，让我们导入 Bootstrap 的 CSS。 添加以下内容到
src/scss/styles.scss导入所有 Bootstrap 的源 Sass。// Import all of Bootstrap’s CSS @use "bootstrap/scss/bootstrap";如果你愿意，你也可以单独导入我们的样式表。 阅读我们的 Sass 导入文档 详情请参阅。
接下来我们加载 CSS 并导入 Bootstrap 的 JavaScript。 添加以下内容到
src/js/main.js加载 CSS 并导入所有 Bootstrap 的 JS。Floating UI 和 Vanilla Calendar Pro 将通过 Bootstrap 自动导入。// Import our custom CSS import '../scss/styles.scss' // Import all of Bootstrap’s JS import * as bootstrap from 'bootstrap'你也可以根据需要单独导入 JavaScript 插件，以保持包的大小较小：
import Alert from 'bootstrap/js/dist/alert' // or, specify which plugins you need: import { Tooltip, Toast, Popover } from 'bootstrap'阅读我们的 JavaScript 文档 有关如何使用 Bootstrap 插件的更多信息。
你完成了！🎉 在 Bootstrap 的源 Sass 和 JS 完全加载后，你的本地开发服务器现在应该看起来像这样：
现在你可以开始添加你想使用的任何 Bootstrap 组件。请确保 查看完整的 Webpack 示例项目 关于如何包含额外的自定义 Sass，并通过仅导入所需的 Bootstrap CSS 和 JS 部分来优化构建。
生产优化
根据你的设置，你可能希望实施一些额外的安全和速度优化，这些优化对于在生产环境中运行项目非常有用。请注意，这些优化并未应用于Webpack示例项目，需要你自行实现。
提取 CSS
我们上面配置的style-loader可以方便地将CSS输出到包中，因此在dist/index.html中手动加载CSS文件不是必须的。然而，这种方法可能在严格的内容安全策略下无法使用，而且由于包大小较大，它可能会成为你应用中的一个瓶颈。
要将 CSS 分离，以便我们可以直接从 dist/index.html 加载它，请使用 mini-css-extract-loader Webpack 插件。
首先，安装插件：
npm install --save-dev mini-css-extract-plugin
然后在 Webpack 配置中实例化并使用该插件：
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,6 +3,7 @@
const path = require('path')
const autoprefixer = require('autoprefixer')
const HtmlWebpackPlugin = require('html-webpack-plugin')
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'development',
@@ -17,7 +18,8 @@ module.exports = {
hot: true
},
plugins: [
- new HtmlWebpackPlugin({ template: './src/index.html' })
+ new HtmlWebpackPlugin({ template: './src/index.html' }),
+ new miniCssExtractPlugin()
],
module: {
rules: [
@@ -25,8 +27,8 @@ module.exports = {
test: /\.(scss)$/,
use: [
{
- // Adds CSS to the DOM by injecting a `<style>` tag
- loader: 'style-loader'
+ // Extracts CSS for each JS file that includes CSS
+ loader: miniCssExtractPlugin.loader
},
{
再次运行 npm run build 后，将会生成一个新文件 dist/main.css，其中包含 src/js/main.js 导入的所有 CSS。如果你现在在浏览器中查看 dist/index.html，样式将会缺失，因为它现在在 dist/main.css中。你可以像这样在 dist/index.html 中包含生成的 CSS：
--- a/dist/index.html
+++ b/dist/index.html
@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="./main.css">
<title>Bootstrap w/ Webpack</title>
</head>
<body>
提取 SVG 文件
Bootstrap 的 CSS 包含多个通过内联 data: URI 引用的 SVG 文件——大多是 mask-image 图标（关闭按钮、轮播控件等），还有一些剩余的 background-image 情况，比如选择框箭头。如果你为项目定义了限制 data: URI 加载图像的内容安全策略，那么这些 SVG 文件将无法加载。你可以通过使用 Webpack 的资源模块功能提取内联 SVG 文件来解决这个问题。
配置 Webpack 以提取像这样的内联 SVG 文件：
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -23,6 +23,14 @@ module.exports = {
},
module: {
rules: [
+ {
+ mimetype: 'image/svg+xml',
+ scheme: 'data',
+ type: 'asset/resource',
+ generator: {
+ filename: 'icons/[hash].svg'
+ }
+ },
{
test: /\.(scss)$/,
use: [
在再次运行npm run build后，你会发现 SVG 文件已被提取到dist/icons中，并且在 CSS 中有正确引用。
在这里看到错误或过时的信息了吗？请 在 GitHub 上提交问题。需要帮助排查问题吗？在 GitHub 上搜索或发起讨论。