Bootstrap Webpack

Bootstrap 结合 Webpack 可以带来许多好处。通过Webpack，可以轻松地将Bootstrap中的各种组件、样式表和JavaScript文件进行模块化管理，并且可以利用Webpack的强大功能进行打包、压缩和优化，以便在生产环境中获得更好的性能表现。本文将为大家介绍如何利用Webpack 将 Bootstrap 应用到项目中。

一、安装Bootstrap

利用 npm 安装 bootstrap 并将其作为 Node.js 模块使用，参见《Bootstrap下载安装》。

二、导入JavaScript插件

通过将以下代码添加到应用程序的入口文件中（通常是 index.js 或 app.js 文件）从而导入（import） Bootstrap 的 JavaScript 插件：

import 'bootstrap';

另外，还可以根据需要 分别导入（import）独立的插件 ：

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Bootstrap依赖于jQuery和Popper，这两个依赖项在peerDependencies属性中已经明确指定。这意味着你必须确保使用npm install --save jquery popper.js命令将这两个依赖项添加到你的package.json文件中。这样做可以确保在安装Bootstrap时，jQuery和Popper也会被正确地安装并作为其依赖项加入到项目中。

三、导入样式

1、导入预编译的Sass文件

对于充分发挥 Bootstrap 的潜能并根据需要对其进行定制，需要将 Bootstrap 的源文件添加到你的项目的构建流程中。

1、创建你自己的 _custom.scss 文件，并将其用于覆盖 Bootstrap 内置的可修改变量；

2、在 Sass 主文件中导入（import）该文件，最后导入 Bootstrap 主文件。

@import "custom";
@import "~bootstrap/scss/bootstrap";

为了编译 Bootstrap，请确保安装并使用了编译 Bootstrap 所需的加载器（loader）： sass-loader、postcss-loader 和 Autoprefixer。在最少的配置情况下， webpack 配置文件应当包含类似下面的规则：

...
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run postcss actions
options: {
plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
...

四、导入编译后的CSS文件

还可以将以下代码行添加到项目的入口文件中从而直接使用 Bootstrap 的现成的 CSS 文件：

import 'bootstrap/dist/css/bootstrap.min.css';

在这种情况下，可以直接使用现有的针对 css 文件的规则，从而无需对 webpack 的配置文件做任何特殊的修改。并且不再需要 sass-loader，只需 style-loader 和 css-loader 即可。

...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...