Bootstrap & Webpack
关于如何使用 Webpack 在项目中包含和捆绑 Bootstrap 的 CSS 和 JavaScript 的官方指南。
![](/manual/bootstrap5/zh//docs/5.3/assets/img/guides/bootstrap-webpack.png)
安装 Webpack
我们要从头开始构建一个使用 Bootstrap 的 Webpack 项目,因此在真正开始之前有一些先决条件和前期步骤。本指南要求您安装 Node.js,并熟悉使用终端。
-
创建项目文件夹并设置 npm 我们将创建 “my-project ”文件夹,并使用“-y ”参数初始化 npm,以避免它询问我们所有交互式问题。
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 了。我们还将安装 Popper,因为下拉菜单、弹出窗口和工具提示的定位都依赖于它。如果不打算使用这些组件,可以省略 Popper。
npm i --save bootstrap @popperjs/core
-
安装其他依赖项 除了 Webpack 和 Bootstrap 之外,我们还需要其他一些依赖项,以便将 Bootstrap 的 CSS 和 JS 与 Webpack 正确导入和捆绑。其中包括 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 btn-primary">Primary button</button> </div> </body> </html>
我们在
div class=“container”
和<button>
中加入了一点 Bootstrap 风格,这样我们就能看到 Webpack 加载 Bootstrap CSS 的时间。 -
现在我们需要一个 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 在终端的 “我的项目 ”文件夹中,运行新添加的 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: [ { // 通过注入<style>标记向 DOM 添加 CSS loader: 'style-loader' }, { // 将 `@import` 和 `url()` 解释为 `import/require()` 并进行解析 loader: 'css-loader' }, { // 使用 PostCSS 处理 CSS 的 webpack 加载器 loader: 'postcss-loader', options: { postcssOptions: { plugins: [ autoprefixer ] } } }, { // 加载 SASS/SCSS 文件并将其编译为 CSS loader: 'sass-loader' } ] } ] } }
以下是我们需要这些加载器的原因。style-loader
会将 CSS 注入 HTML 页面<head>
中的<style>
元素,css-loader
有助于使用@import
和 url()
,postcss-loader
是 Autoprefixer 的必备选项,而 sass-loader
则允许我们使用 Sass。
-
现在,让我们导入 Bootstrap 的 CSS 在
src/scss/styles.scss
中添加以下内容,以导入 Bootstrap 的所有 Sass 源代码。// 导入所有 Bootstrap CSS @import "bootstrap/scss/bootstrap";
如果你愿意,也可以单独导入我们的样式表。详情请阅读我们的 Sass 导入文档。
-
接下来,我们加载 CSS 并导入 Bootstrap 的 JavaScript 在
src/js/main.js
中添加以下内容,以加载 CSS 并导入所有 Bootstrap 的 JS。Popper 将通过 Bootstrap 自动导入。// 导入 CSS import '../scss/styles.scss' // 导入所有 Bootstrap's JS import * as bootstrap from 'bootstrap'
您还可以根据需要单独导入 JavaScript 插件,以减小捆绑包的大小:
import Alert from 'bootstrap/js/dist/alert' // 或者导入所需插件 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: [
{
- // 通过注入`<style>`标记向 DOM 添加 CSS
- loader: 'style-loader'
+ // 为每个包含 CSS 的 JS 文件提取 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 文件。如果您为项目定义了内容安全策略,阻止图片的 data:
URI,那么这些 SVG 文件将无法加载。您可以使用 Webpack 的 asset
模块功能提取内联 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 中正确引用。
See something wrong or out of date here? Please open an issue on GitHub. Need help troubleshooting? Search or start a discussion on GitHub.