搭建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

相关推荐
满分观察网友z1 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构7 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙14 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1115 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
前端双越老师19 分钟前
30 行代码 langChain.js 开发你的第一个 Agent
人工智能·node.js·agent
江城开朗的豌豆19 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er24 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0627 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444030 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆30 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js