为了在Node.js中使用Bootstrap，我进行了一些调查

我想使用Bootstrap来装饰。

我正在制作一个论坛应用程序。虽然用javascript、html和css也不是不能做，但是既然有机会，我想尝试一些新增技术，于是经过一番调查研究后选择了bootstrap。

阅读文件以便轻松运用，然而却遭遇困难并挣扎不已。

似乎需要「webpack」。

这次的引用和参考网站在这里。
这是神奇的时刻。
非常易懂。
学习最新版本的webpack 5入门，如何捆绑Bootstrap。

webpack是将多个JavaScript文件合并成一个文件的工具。如果能够合并成一个文件，将其应用于html或者ejs也会变得简单方便。
webpack不仅可以合并JavaScript文件，还可以通过安装被称为loader的模块，将sass文件和css文件也合并成一个文件。这是一个非常好用的工具。

以下是将Bootstrap应用于Node.js的三个步骤的备忘录。

1. 安装模块

npm i -D webpack webpack-cli style-loader css-loader

安装用于运行bootstrap的库。

npm i -S bootstrap jquery popper.js

一个选项：由于文档依赖于jQuery和popper，因此按照指示进行安装。

3. webpack的配置和执行

在webpack.config.js中描述了文件的处理方式。
在这里，可以将其简单地理解为菜谱。

module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "production",
  module: {
    rules: [
      {
        // 対象となるファイルの拡張子(cssのみ)
        test: /\.css$/,
        // Sassファイルの読み込みとコンパイル
        use: [
          // スタイルシートをJSからlinkタグに展開する機能
          "style-loader",
          // CSSをバンドルするための機能
          "css-loader"
        ],
      },
    ],
  },
};

接下来，准备食材。

在src文件夹中创建一个index.js文件。
在index.js文件中使用import语句引入Bootstrap。

// Bootstrapのスタイルシート側の機能を読み込む
import "bootstrap/dist/css/bootstrap.min.css";

// BootstrapのJavaScript側の機能を読み込む
import "bootstrap";

只要食材和烹饪方法准备好了，就可以立即开始烹饪了。

npx webpack

执行之后，将生成’dist’文件夹以及一个合并后的js文件。将这个文件同样引入到html或者ejs文件中，配置环境就完成了。只需要复制粘贴bootstrap文档的布局，就可以开始使用了。

总结

这个写得有点儿草率，但我还是留下来作为备忘录。
我想在以后掌握webpack的写法。