温州网站,全屏网站源码,网站 description,wordpress chuxia主题我是个前端菜鸡#xff0c;最近准备学习一点前端知识#xff0c;先从Bootstrap5开始#xff0c;毕竟早期Bootstrap还是比较火的。推出的Bootstrap5不再和jQery强制绑定#xff0c;这里直接按照官方文档上来操作#xff0c;打包工具我们选择Webpack。
一 前期准备 前期准备…我是个前端菜鸡最近准备学习一点前端知识先从Bootstrap5开始毕竟早期Bootstrap还是比较火的。推出的Bootstrap5不再和jQery强制绑定这里直接按照官方文档上来操作打包工具我们选择Webpack。
一 前期准备 前期准备就是一个准备好软件包管理器我这里选择的是npm。npm是JavaScript的包管理器是node的默认的包管理器我们可以通过命令行工具安装和管理项目所需的第三方包。所以在使用npm这工具之前你先要安装好nodeJS。
使用npm是后面我们下载Bootstrap和用Webpack下载打包用得到。npm不仅是一个工具他还维护了一个软件包注册中心这里很多的开源项目作为后台开发者你还可以把它理解为前端额maven管理和更新自己的项目中的依赖。
这里我介绍一个工具解释nvm这是一个管理node版本的工具对于我们可能遇到不同项目会用到不同版本的node可以方便我们切换。
二 下载Bootstrap 我们这里的是npm来安装下载Bootstrap当人你也可以使用别的工具yarnRubyGems等其他的工具来下载这里是用npm命令行输入命令的形式下载Bootstrap
npm install bootstrap5.3.0-alpha1三 构建一个Bootstrap和Webpack项目 这里直接构建一个简单的可以启动的Bootstrap的Webpack项目。
你可能会问Webpack是什么这是一个打包工具提供了一种方式打包JavaScript应用程序的资源JavaScriptCSS图片这些。和Maven也有一点像Maven构建项目后可以把项目打包来给我们使用Webpack这方面也是把这个项目达成包真正提供出去给人家用的包。
1创建项目和安装Webpack 先创建一个文件夹这里我们用vscode来打开。 比如我这里创建一个文件夹Bootstrap51打开这个文件夹我们先初始化npm,避免后面询问我们交互会生成一个package.json。
npm init -y然后我们下载webpack几个工具
npm i --save-dev webpack webpack-cli webpack-dev-servernpm 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-loader3工程结构 我们在这些该安装的安装好的情况下我们要整理一下工程的目录结构要按照规范创建目录大改结构如下这里的文件我们创建一个空文件就可以后面我们会填写这些文件
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 langenheadmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1titleBootstrap w/ Webpack/title/headbodydiv classcontainer py-4 px-3 mx-autoh1Hello, Bootstrap and Webpack!/h1button classbtn btn-primaryPrimary button/button/divscript src./main.js/script/body
/htmlnpm脚本运行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 Bootstraps 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 Bootstraps JS
import * as bootstrap from bootstrap项目位置 https://github.com/stubborn123/StudyCode/tree/master/JS/Bootstrap5/Bootstrap51
