搭建Bootstrap5+Webpack项目

我是个前端菜鸡，最近准备学习一点前端知识，先从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 自动导入。

复制代码

// 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