bootstrap-webpack

使用 Webpack 搭建 Bootstrap 6

搭建一个由 Webpack 打包的 Bootstrap 6 项目，并包含处理 Sass 所需的加载器。需要熟悉 Node.js 和终端。

工作流

• 步骤 1：设置 npm 并安装依赖
• 步骤 2：创建项目结构
• 步骤 3：配置 Webpack（样板代码 + 开发服务器）
• 步骤 4：设置加载器并导入 Bootstrap
• 步骤 5：验证
• 步骤 6（可选）：生产环境优化

---

步骤 1：设置 npm 并安装依赖

1. 创建项目并初始化 npm：

   mkdir my-project && cd my-project
   npm init -y
   

2. 安装 Webpack 及其工具：

   npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
   

3. 安装 Bootstrap 及其可选的对等依赖项（如果不使用菜单、弹出框或工具提示，请省略 @floating-ui/dom；如果不使用日期选择器，请省略 vanilla-calendar-pro）：

   npm i --save [email protected] @floating-ui/dom vanilla-calendar-pro
   

4. 安装打包 Bootstrap CSS 所需的加载器、Sass 和 Autoprefixer：

   npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
   

---

步骤 2：创建项目结构

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

---

步骤 3：配置 Webpack

1. webpack.config.js — 入口、输出和开发服务器：

   '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' })
     ]
   }
   

2. src/index.html：

   <!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>
   

3. package.json — 添加脚本：

   {
     "scripts": {
       "start": "webpack serve",
       "build": "webpack build --mode=production",
       "test": "echo \"Error: no test specified\" && exit 1"
     }
   }
   

4. 启动 Webpack：

   npm start
   

---

步骤 4：设置加载器并导入 Bootstrap

1. 将 module.rules 加载器链添加到 webpack.config.js（顺序很重要：sass-loader 编译，postcss-loader 运行 Autoprefixer，css-loader 解析导入，style-loader 注入 CSS）：

   '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: [
             { loader: 'style-loader' },
             { loader: 'css-loader' },
             {
               loader: 'postcss-loader',
               options: {
                 postcssOptions: {
                   plugins: [
                     autoprefixer
                   ]
                 }
               }
             },
             { loader: 'sass-loader' }
           ]
         }
       ]
     }
   }
   

2. src/scss/styles.scss — 使用 @use 导入源 Sass（切勿使用 @import）：

   // Import all of Bootstrap's CSS
   @use "bootstrap/scss/bootstrap";
   

   若要自定义，请覆盖 Bootstrap 的 CSS 令牌映射（$root-tokens、$*-tokens）——请参阅自定义 › Sass。在 Sass 中，令牌名称不带前缀；Bootstrap 的 dist/CDN CSS 会通过 PostCSS 添加 --bs- 前缀，因此自行编译源代码时，令牌名称会保持不带前缀。

3. src/js/main.js — 加载 CSS 并导入 Bootstrap 的 JS。Floating UI 和 Vanilla Calendar Pro 会通过 Bootstrap 自动导入：

   // Import our custom CSS, then all of Bootstrap’s JS
   import '../scss/styles.scss'
   import * as bootstrap from 'bootstrap'
   

   仅导入所需的插件，以减小打包体积：

   import { Tooltip, Toast, Popover } from 'bootstrap'
   

---

步骤 5：验证

1. 运行 npm start 并打开 http://localhost:8080 —— .container 和 .btn-solid.theme-primary 按钮应已应用样式。
2. 确认控制台没有模块解析或加载器错误。
3. 触发一个 JS 组件（工具提示/对话框），确认 JS 包正常工作。
4. Bootstrap 6 需要使用支持 oklch() 和 color-mix() 的浏览器。

---

步骤 6（可选）：生产环境优化

正常运行不需要这些优化；仅在需要时应用。

• 将 CSS 提取到文件中（适用于严格的 CSP，或避免生成较大的 JS 包）：安装 mini-css-extract-plugin，将 style-loader 替换为 miniCssExtractPlugin.loader，添加该插件，然后从 HTML 链接生成的 dist/main.css。
• 提取内联 SVG：Bootstrap 的 CSS 通过内联 data: URI 引用 SVG。如果 CSP 阻止 data: 图片，请添加一条 Webpack asset-module 规则，将 mimetype: 'image/svg+xml' / scheme: 'data' 与 type: 'asset/resource' 匹配，以便将它们输出为文件。

完整参考请参阅 twbs/examples Webpack 项目。