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 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
JsRender实用入门教程
Oct 31 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
javascript实现数独解法
Mar 14 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
php二维数组转成字符串示例
2014/02/17 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
node使用request请求的方法
2019/12/20 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
python复制文件的方法实例详解
2015/05/22 Python
django 多数据库配置教程
2018/05/30 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
英文版餐饮运营管理求职信
2013/11/06 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
财务部总监岗位职责
2014/03/12 职场文书
推荐信格式范文
2014/05/09 职场文书
大学生操行评语大全
2014/12/31 职场文书
施工员岗位职责
2015/02/10 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python