Webpack如何引入bootstrap的方法


Posted in Javascript onJune 17, 2017

Bootstrap中是一种事实上的界面标准,标准到现在的网站大量的使用它。如果可以使用webpack引入的bootstrapcss,就可以一个npm install完成项目的依赖,而不必手工的添加到html内。

本来以为在入口文件内加一行就行:

import 'bootstrap/dist/css/bootstrapcss'

然后安装依赖:

npm i bootstrap url url-loader style-loader css-loader --save

实际上却不是想象的那么简单。因为css文件内还引用了很多类型的字体文件和矢量图文件。要引入它,必须同时提供css之外的类型的对应的loader:

//webpackconfigjs:
moduleexports = {
entry: {
'js'
},
output: {
filename: 'bundlejs'
},
module: {
loaders: [

{ test: /\css$/, loader: 'style-loader!css-loader' },
{ test: /\eot(\?v=\d+\\d+\\d+)?$/, loader: "file" },
{ test: /\(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
{ test: /\ttf(\?v=\d+\\d+\\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\svg(\?v=\d+\\d+\\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
]
}
};

我们在html文件内使用那么一点点的bootstrap:

// chtml
<html>
<body>
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
<li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Profile</a></li>
<li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Messages</a></li>
</ul>
<script type="text/javascript" src="bundlejs"></script>
</body>
</html>

再次执行转译:

webpack

打开浏览器:

open chtml

看到bootstrap那熟悉而太熟悉的界面。

引入jquery

如果需要使用bootstrap的js插件的话,就必须首先引入jquery。引用jquery的一个方法是使用webpack插件。

首先安装jquery:

npm i jquery

其次使用插件装入jquery,方法是修改webpack的配置文件,加入:

plugins: [
new webpackProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]

在入口文件内加入代码来做验证:

$("body")append("<div>hello world</div>")

如果成功,说明jquery加载成功。这样你就可以在入口js文件内加载bootstrapjs了:

import 'bootstrap/dist/js/bootstrapjs'

排除错误

我确实在引入bootstrap的时候,遇到一个神奇的错误。在webpack转译时报错,css-loader,unknown word样子的错误。对webpackconfigjs文件加入一个include属性并指向到不存在的目录即可。

{
test: /\css$/,
include: [
pathresolve(__dirname, "not_exist_path")
],
loader: "style!css"
}

原始的issue在此:https://githubcom/webpack/cs 。我看看看到此答案时以为是个玩笑。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 动态文字滚动的例子
Jan 17 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
canvas红包照片实例分享
Feb 28 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
Webpack执行命令参数详解
Jun 17 #Javascript
JS实现留言板功能
Jun 17 #Javascript
利用vscode编写vue的简单配置详解
Jun 17 #Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 #Javascript
JS实现新建文件夹功能
Jun 17 #Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 #Javascript
JS实现商品筛选功能
Aug 19 #Javascript
You might like
php过滤XSS攻击的函数
2013/11/12 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
基于python的字节编译详解
2017/09/20 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
Java面试笔试题大全
2016/11/23 面试题
优秀共产党员演讲稿
2014/09/04 职场文书
个人向公司借款协议书
2014/10/09 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python