我是个前端菜鸡，最近准备学习一点前端知识，先从Bootstrap5开始，毕竟早期Bootstrap还是比较火的。推出的Bootstrap5不再和jQery强制绑定，这里直接按照官方文档上来操作，打包工具我们选择Webpack。
一 前期准备
前期准备就是一个准备好软件包管理器，我这里选择的是npm。npm是JavaScript的包管理器，是node的默认的包管理器，我们可以通过命令行工具安装和管理项目所需的第三方包。所以在使用npm这工具之前，你先要安装好nodeJS。
使用npm是后面我们下载Bootstrap和用Webpack下载打包用得到。npm不仅是一个工具，他还维护了一个软件包注册中心，这里很多的开源项目，作为后台开发者你还可以把它理解为前端额maven，管理和更新自己的项目中的依赖。
这里我介绍一个工具解释nvm，这是一个管理node版本的工具，对于我们可能遇到不同项目会用到不同版本的node，可以方便我们切换。
二 下载Bootstrap
我们这里的是npm来安装下载Bootstrap，当人你也可以使用别的工具yarn，RubyGems等其他的工具来下载，这里是用npm命令行输入命令的形式下载Bootstrap
npm install bootstrap@5.3.0-alpha1
三 构建一个Bootstrap和Webpack项目
这里直接构建一个简单的可以启动的Bootstrap的Webpack项目。
你可能会问Webpack是什么，这是一个打包工具，提供了一种方式，打包JavaScript应用程序的资源，JavaScript，CSS，图片这些。和Maven也有一点像，Maven构建项目后，可以把项目打包来给我们使用，Webpack这方面也是，把这个项目达成包，真正提供出去给人家用的包。
（1）创建项目和安装Webpack
先创建一个文件夹，这里我们用vscode来打开。
比如我这里创建一个文件夹，Bootstrap51，打开这个文件夹，我们先初始化npm,避免后面询问我们交互（会生成一个package.json）。
npm init -y
然后我们下载webpack几个工具
npm i --save-dev webpack webpack-cli webpack-dev-server
npm i 就是npm install的安装命令的缩写
webpack webpack-cli webpack-dev-server，这三个是我们安装的Webpack工具：
webpack是Webpack的核心，用于模块打包。
webpack-cil是命令行工具，我们可以通过命令行来使用Webpack。
webpack-dev-server 是一个小型的服务器，Webpack编译资源，可以实施加载实时预览。
（2）安装Bootstrap和一些额外的依赖
安装 Bootstrap。我们还将安装 Popper，因为我们的下拉菜单、弹出框和工具提示依赖它来定位。如果你不打算使用这些组件，你可以在这里省略 Popper。
npm i --save bootstrap @popperjs/core
这里安装的是两个，bootstrap和 @popperjs/core是Popper核心包，定位工具提示和弹出框。
后面我们要加入一些额外的依赖，比如css的加载器，sass加载器，style加载器，，postcss加载器，以及autoprefixer支持不同浏览器CSS代码。
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
（3）工程结构
我们在这些该安装的安装好的情况下，我们要整理一下工程的目录结构，要按照规范创建目录，大改结构如下，这里的文件我们创建一个空文件就可以，后面我们会填写这些文件：
my-project/
├── dist/
│ └── index.html
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js
(4)配置Webpack
补充webpack.config.js
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
<!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>
npm脚本运行Webpack
改写package.json，让npm命令来运行webpack服务器，方便我们本地测试。
打开我们项目中的package.json,找到对应的script，填写后如下
"scripts": {
"start": "webpack serve --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
}
测试npm脚本启动
在终端输入
npm start
终端不报错的话，可以看一下页面对应端口，locahost:xxx，看一下页面
（5）导入Bootstrap
将 Bootstrap 导入到 Webpack 需要我们在第一部分中安装的加载器。我们已经通过 npm 安装了这些加载器，但现在需要配置 Webpack 来使用它们（实际添加module就部分完事）。
在webpack.config.js设置加载器，最后内容如下：
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'
}
]
}
]
}
}
导入Bootstrap的CSS
导入 Bootstrap 的 CSS。在 src/scss/styles.scss 中添加以下内容以导入所有 Bootstrap 的源 Sass。
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
将加载 CSS 并导入 Bootstrap 的 JavaScript
在 src/js/main.js 中添加以下内容，以加载 CSS 并导入所有 Bootstrap 的 JS。Popper 将通过 Bootstrap 自动导入。文章来源：https://www.toymoban.com/news/detail-857488.html
// Import our custom CSS
import '../scss/styles.scss'
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
项目位置：
https://github.com/stubborn123/StudyCode/tree/master/JS/Bootstrap5/Bootstrap51文章来源地址https://www.toymoban.com/news/detail-857488.html
到了这里，关于搭建Bootstrap5+Webpack项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
