引導程序和 Webpack

關於如何使用 Webpack 在項目中包含和捆綁 Bootstrap 的 CSS 和 JavaScript 的官方指南。

在本頁面

想跳到最後嗎？從twbs/examples 存儲庫下載本指南的源代碼和工作演示。您還可以在 StackBlitz 中打開示例進行實時編輯。

設置

我們正在從頭開始使用 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這樣我們就可以運行本地開發服務器。我們--save-dev用來表示這些依賴項僅用於開髮用途而不用於生產。
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
安裝引導程序。現在我們可以安裝 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 {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js

完成後，您的完整項目應如下所示：

my-project/
├── dist/
│   └── index.html
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│       └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js

此時，一切都在正確的位置，但是 Webpack 將無法工作，因為我們還沒有填寫我們的webpack.config.js。

配置 Webpack

安裝好依賴項並準備好我們的項目文件夾供我們開始編碼後，我們現在可以配置 Webpack 並在本地運行我們的項目。

webpack.config.js在您的編輯器中打開。由於它是空白的，我們需要向它添加一些樣板配置，以便我們可以啟動我們的服務器。這部分配置告訴 Webpack 查找我們項目的 JavaScript，將編譯後的代碼輸出到 ( dist) 的位置，以及開發服務器的行為方式（dist通過熱重載從文件夾中拉出）。
```
const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  }
}
```

接下來我們填寫我們的dist/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>
    <script src="./main.js"></script>
  </body>
</html>

我們在這裡包含了一點 Bootstrap 樣式div class="container"，<button>以便我們看到 Webpack 何時加載 Bootstrap 的 CSS。

現在我們需要一個 npm 腳本來運行 Webpack。打開package.json並添加start如下所示的腳本（您應該已經有了測試腳本）。我們將使用這個腳本來啟動我們的本地 Webpack 開發服務器。
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
最後，我們可以啟動 Webpack。從my-project終端的文件夾中，運行新添加的 npm 腳本：
```
npm start
```

在本指南的下一部分也是最後一部分中，我們將設置 Webpack 加載器並導入 Bootstrap 的所有 CSS 和 JavaScript。

導入引導

將 Bootstrap 導入 Webpack 需要我們在第一部分中安裝的加載器。我們已經用 npm 安裝了它們，但現在需要配置 Webpack 才能使用它們。

在webpack.config.js. 您的配置文件現在已完成，應該與下面的代碼段匹配。這裡唯一的新部分是該module部分。

const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  require('autoprefixer')
                ]
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}

以下是我們需要所有這些加載器的原因的回顧。style-loader將 CSS 注入HTML 頁面的<style>元素中，幫助使用and ，是 Autoprefixer 所必需的，並允許我們使用 Sass。<head>css-loader@importurl()postcss-loadersass-loader

現在，讓我們導入 Bootstrap 的 CSS。添加以下內容以src/scss/styles.scss導入所有 Bootstrap 的源 Sass。
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
如果需要，您也可以單獨導入我們的樣式表。閱讀我們的 Sass 導入文檔了解詳情。
接下來我們加載 CSS 並導入 Bootstrap 的 JavaScript。添加以下內容以src/js/main.js加載 CSS 並導入所有 Bootstrap 的 JS。Popper 將通過 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-loaderCSS 發送到包中，因此dist/index.html不需要手動加載 CSS 文件。但是，這種方法可能不適用於嚴格的內容安全策略，並且由於包大小過大，它可能會成為您的應用程序的瓶頸。

要分離 CSS 以便我們可以直接從加載它dist/index.html，請使用mini-css-extract-loaderWebpack 插件。

首先，安裝插件：

npm install --save-dev mini-css-extract-plugin

然後在 Webpack 配置中實例化並使用插件：

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,8 +1,10 @@
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('path')
 
 module.exports = {
   mode: 'development',
   entry: './src/js/main.js',
+  plugins: [new miniCssExtractPlugin()],
   output: {
     filename: "main.js",
     path: path.resolve(__dirname, "dist"),
@@ -18,8 +20,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. 如果您dist/index.html現在在瀏覽器中查看，樣式將會丟失，因為它現在在dist/main.css. 您可以像這樣包含生成的 CSS dist/index.html：

--- a/webpack/dist/index.html
+++ b/webpack/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 文件

data:Bootstrap 的 CSS 包括通過內聯URI對 SVG 文件的多個引用。如果您為項目定義阻止data:圖像 URI 的內容安全策略，則不會加載這些 SVG 文件。您可以通過使用 Webpack 的資產模塊功能提取內聯 SVG 文件來解決此問題。

配置 Webpack 以提取內聯 SVG 文件，如下所示：

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -16,6 +16,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後，您會發現提取到dist/iconsCSS 中並正確引用的 SVG 文件。

在這裡看到錯誤或過時的東西？請在 GitHub 上打開一個問題。需要幫助進行故障排除？在 GitHub 上搜索或發起討論。