有关如何使用 Webpack 将 Bootstrap 的 CSS 和 JavaScript 包含在项目中并捆绑在一起的官方指南。
想跳到最后吗？从 twbs/examples 存储库下载本指南的源代码和工作演示。您还可以在 StackBlitz 中打开示例进行实时编辑。
什么是 Webpack？
Webpack 是一个 JavaScript 模块打包器，用于处理模块及其依赖项以生成静态资产。它简化了管理具有多个文件和依赖项的复杂 Web 应用程序。
设置
我们正在使用 Bootstrap 从头开始构建一个 Webpack 项目，因此在我们真正开始之前有一些先决条件和前期步骤。本指南要求您安装Node.js并熟悉终端。
创建一个项目文件夹并设置 npm。我们将创建文件夹并使用参数初始化 npm，以避免它问我们所有的交互式问题。my-project-y
mkdir my-project && cd my-project
npm init -y安装 Webpack。接下来我们需要安装我们的 Webpack 开发依赖项：对于 Webpack 的核心，这样我们就可以从终端运行 Webpack 命令，这样我们就可以运行本地开发服务器。此外，我们将安装以便能够存储我们的目录而不是默认目录。我们过去用来表示这些依赖项仅用于开发用途，不适用于生产环境。webpackwebpack-cliwebpack-dev-serverhtml-webpack-pluginindex.htmlsrcdist--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。
项目结构
我们已经创建了文件夹并初始化了 npm。现在我们还将创建 和 文件夹来完善项目结构。从 运行以下作，或手动创建如下所示的文件夹和文件结构。my-projectsrcdistmy-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，在哪里将编译后的代码输出到 （），以及开发服务器应该如何运行（从具有热重载的文件夹中提取）。distdist
'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，我们将在后面的步骤中添加到其中。在执行此作之前，我们必须为其提供一些要渲染的内容，并包含上一步中的 JS。output
<!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>我们在这里用 and 包含一些 Bootstrap 样式，以便我们看到 Webpack 何时加载 Bootstrap 的 CSS。div class="container"<button>
现在我们需要一个 npm 脚本来运行 Webpack。打开并添加如下所示的脚本（您应该已经有了测试脚本）。我们将使用此脚本来启动本地 Webpack 开发服务器。您还可以添加如下所示的脚本来构建您的项目。package.jsonstartbuild
{
// ...
"scripts": {
"start": "webpack serve",
"build": "webpack build --mode=production",
"test": "echo "Error: no test specified" && exit 1"
},
// ...
}最后，我们可以启动 Webpack。从终端中的文件夹中，运行新添加的 npm 脚本：my-project
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',
options: {
sassOptions: {
// Optional: Silence Sass deprecation warnings. See note below.
silenceDeprecations: [
'mixed-decls',
'color-functions',
'global-builtin',
'import'
]
}
}
}
]
}
]
}
}以下是我们为什么需要所有这些加载器的回顾。 将 CSS 注入 HTML 页面中的元素，帮助使用 和 ，这是 Autoprefixer 所必需的，并允许我们使用 Sass。style-loader<style><head>css-loader@importurl()postcss-loadersass-loader注意：使用最新版本的 Dart Sass 编译源 Sass 文件时，会显示 Sass 弃用警告。这不会阻止编译或使用 Bootstrap。我们正在进行长期修复，但与此同时，这些弃用通知可以忽略。
现在，让我们导入 Bootstrap 的 CSS。添加以下内容以导入 Bootstrap 的所有源 Sass。
src/scss/styles.scss
// Import all of Bootstrap’s CSS
@import "bootstrap/scss/bootstrap";如果需要，您也可以单独导入我们的样式表。阅读我们的 Sass 导入文档了解详细信息。
接下来，我们加载 CSS 并导入 Bootstrap 的 JavaScript。添加以下内容以加载 CSS 并导入 Bootstrap 的所有 JS。Popper 将通过 Bootstrap 自动导入。src/js/main.js
// 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
我们上面配置的可以方便地将 CSS 发送到捆绑包中，因此无需手动加载 CSS 文件。但是，这种方法可能不适用于严格的内容安全策略，并且由于捆绑包大小较大，它可能会成为应用程序中的瓶颈。style-loaderdist/index.html
要分离 CSS，以便我们可以直接从 加载它，请使用 Webpack 插件。dist/index.htmlmini-css-extract-loader
首先，安装插件：
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
},
{
再次运行后，会有一个新文件，其中包含 导入的所有 CSS 。如果您现在在浏览器中查看，则该样式将丢失，就像现在在 .您可以像这样将生成的 CSS 包含在其中：npm run builddist/main.csssrc/js/main.jsdist/index.htmldist/main.cssdist/index.html
--- 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 通过内联 URI 包含对 SVG 文件的多个引用。如果为项目定义了阻止图像 URI 的内容安全策略，则不会加载这些 SVG 文件。您可以通过使用 Webpack 的资产模块功能提取内联 SVG 文件来解决此问题。data:data:
配置 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: [
再次运行后，您会发现 SVG 文件已提取到 CSS 中并正确引用。npm run builddist/icons