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 相关文章推荐
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 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 mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
用原生js做单页应用
2017/01/17 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
python爬虫基本知识
2018/03/05 Python
python字符串常用方法
2018/06/14 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
pandas实现导出数据的四种方式
2020/12/13 Python
python regex库实例用法总结
2021/01/03 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
老总助理工作岗位职责
2014/02/06 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
师德师风剖析材料
2014/09/30 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
安全教育日主题班会
2015/08/13 职场文书
创业计划书之农家乐
2019/10/09 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
使用numpy nonzero 找出非0元素
2021/05/14 Python
浅谈Java父子类加载顺序
2021/08/04 Java/Android