html引入bootstrap,Webpack如何引入bootstrap的方法

た入场券 2022-10-07 04:45 255阅读 0赞

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

*  Home
 *  Profile
 *  Messages

再次执行转译：

webpack

打开浏览器：

open chtml

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

引入jquery

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

首先安装jquery：

npm i jquery

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

plugins: \[

new webpackProvidePlugin(\{

$: "jquery",

jQuery: "jquery"

\})

\]

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

$("body")append("

hello world

")

如果成功，说明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 。我看看看到此答案时以为是个玩笑。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML,bootstrap等引入vue,elementui 等；bootstrap 引入elementui

在非vue项目引用elementUI样式, 注意:数据定义 `data: function () {}` 而非data: () \{\} 方法一(通过 CDN 的方式加载

我就是我/ 2023年01月02日 02:20/ 0 赞/ 283 阅读

相关 html引入bootstrap,Webpack如何引入bootstrap的方法

Bootstrap中是一种事实上的界面标准，标准到现在的网站大量的使用它。如果可以使用webpack引入的bootstrapcss，就可以一个npm install完成项目的依

た入场券/ 2022年10月07日 04:45/ 0 赞/ 256 阅读

相关 bootstrap 三个文件的引入

bootstrap的环境至少需要3个文件：bootstrap.min.css jquery.mis.jsbootstrap.min.js \[html\] [vi

阳光穿透心脏的1/2处/ 2022年07月15日 08:13/ 0 赞/ 303 阅读

相关 vue中引入bootstrap

前面发了几篇关于vue引入第三方插件的，自己也练习很多，没想到今天引入bootstrap的时候又犯了低级错误。引入bootstrap步骤也很简单，首先需要修改bu

ゞ浴缸里的玫瑰/ 2022年06月12日 00:17/ 0 赞/ 302 阅读

相关 vue引入bootstrap——webpack

vue引入bootstrap——webpack 想要在vue中引入bootstrap，引入的时候需要按照如下的步骤进行。 1、引入jquery 2、引入bootstr

柔光的暖阳◎/ 2022年06月09日 05:39/ 0 赞/ 357 阅读

相关 vue引入jquery和bootstrap的方法

1、使用命令npm install jquery --save-dev 引入jquery。 2、在webpack.base.conf.js中添加如下内容： v

妖狐艹你老母/ 2022年05月19日 07:44/ 0 赞/ 284 阅读

相关在jsp引入bootstrap

第一步：在https://v3.bootcss.com/getting-started/\top该网站下载Bootstrap，有可以看到有三种,如下图所示（本人下载的是源码）

布满荆棘的人生/ 2022年04月10日 01:42/ 0 赞/ 317 阅读

相关如何在vue里引入Bootstrap

1. 安装jquery $ npm install jquery --save-dev 2：在webpack.config.js 添加内容 const webpack

￡神魔★判官ぃ/ 2022年01月21日 06:13/ 0 赞/ 359 阅读

相关 01-HTML引入

参考: 张鹏平面设计一, 该教程涉及的内容 1, 设计 ①PS网页效果图设计 ②Flash网页动画设计 2, 制作 ① html, xh

旧城等待，/ 2021年11月12日 00:02/ 0 赞/ 332 阅读

相关 vue项目引入Bootstrap

参考网址：[http://www.jianshu.com/p/83ae402dda5b][http_www.jianshu.com_p_83ae402dda5b] <

冷不防/ 2021年06月24日 16:10/ 0 赞/ 580 阅读