这里主要介绍使用 npm 来安装 bootstrap.

参考资料

下面这个我觉得有时间可以参考一下，我觉得这个可能更加具有普适性

Webpack

安装

bootstrap 是基于 jquery 的，所以，在安装之前，还需要安装 jquery。

参考

npm | 安装 jquery

安装 bootstrap

npm install bootstrap@4

在入口文件中引入 Bootstrap：

1 2	import 'bootstrap'; // 引入 Bootstrap import 'bootstrap/dist/css/bootstrap.min.css'; // 引入 Bootstrap 的 css

Bootstrap 的一些功能还需要依赖 popper.js，安装 popper.js：

npm install --save-dev popper.js

我安装的版本是

"popper.js": "^1.16.1",

popper.js 可以不需要引入。

这里需要打包后生成独立的 CSS 文件，所以还需要安装和配置 css-loader 和 mini-css-extract-plugin 插件。

安装 mini-css-extract-plugin ：

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

版本如下

"mini-css-extract-plugin": "^1.3.3",

打开 webpack.config.js ，引入 mini-css-extract-plugin 插件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

在插件配置区域添加 mini-css-extract-plugin 的配置：

plugins: [
  new MiniCssExtractPlugin({
    filename: 'style.css',
  }),
];

其中的 style.css 就是打包后输出的文件名。

安装 css-loader：

npm install --save-dev css-loader

配置 css-loader 和 mini-css-extract-plugin 的 loader：

{
  test: /\.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: './dist',
      },
    },
    {
      loader: 'css-loader',
    },
  ],
}

到这里就可以打包 Bootstrap 了。

我的 webpack.config.js 如下:

let path = require('path');
const webpack = require('webpack');
let MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './src/pages/camera/main.js',
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: './dist',
                    },
                }, {
                    loader: "css-loader",
                }
                ]
            },
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css',
        }),
    ]
}

下面的我还没验证。

使用 npm 安装的 Bootstrap 还包含 .scss 的 Sass 文件，Sass 文件分为很多个，如果你了解每个 Sass 文件的作用的话，可以只打包用到的功能。

如果要查看 Sass 文件的打包配置可以访问 Webpack 简易使用指南。

处理字体图标

字体图标可以打包到 CSS 中，也可以打包为独立的字体文件，如果字体文件不是太大的话可以打包到 CSS 中。

以 IcoMoon 的字体图标为例，因为 IcoMoon 的图标数量是可定制的，所以字体文件也不会太大，这里就直接打包到 CSS 中。

下面是要打包的字体文件：

.
├── fonts
│   ├── icomoon.eot
│   ├── icomoon.svg
│   ├── icomoon.ttf
│   └── icomoon.woff
└── icon.css

其中的 icon.css 就是字体图标的 CSS，4 个字体图标都在 fonts 目录中。

打开字体图标的 CSS，设置一下字体图标的路径：

@font-face {
  font-family: 'icomoon';
  src:  url('./fonts/icomoon.eot?n4lnkm');
  src:  url('./fonts/icomoon.eot?n4lnkm#iefix') format('embedded-opentype'),
    url('./fonts/icomoon.ttf?n4lnkm') format('truetype'),
    url('./fonts/icomoon.woff?n4lnkm') format('woff'),
    url('./fonts/icomoon.svg?n4lnkm#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Webpack 的路径写法和常见的路径写法有点不一样，在 Webpack 中即便是同级的文件，在文件名前也需要加 ./。

要把字体文件打包到 CSS 中还需要 url-loader。

安装 url-loader：

npm install --save-dev url-loader

在 webpack.config.js 中的 loader 配置区域添加 url-loader 的配置：

{
  test: /\.eot$|\.svg$|\.ttf$|\.woff$/,
  use: [
    {
      loader: 'url-loader',
    },
  ],
}

在 JS 入口文件中引入字体图标的 CSS 文件就可以打包了，Webpack 会根据 CSS 文件中的字体文件路径寻找和打包字体文件，字体图标最终会以 base64 的方式被打包到 CSS 中。