Bootstrap中是一种事实上的界面标准，标准到现在的网站大量的使用它。如果可以使用webpack引入的bootstrap.css，就可以一个npm install完成项目的依赖，而不必手工的添加到html内。
本来以为在入口文件内加一行就行：

  1. import 'bootstrap/dist/css/bootstrap.css'

复制代码

然后安装依赖：

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

复制代码

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

  1. //webpack.config.js:
  2. module.exports = {
  3. entry: {
  4. '1.js'
  5. },
  6. output: {
  7. filename: 'bundle.js'
  8. },
  9. module: {
  10. loaders: [
  11. { test: /\.css$/, loader: 'style-loader!css-loader' },
  12. { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
  13. { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
  14. { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
  15. { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
  16. ]
  17. }
  18. };

复制代码

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

  1. // c.html
  2. <html>
  3. <body>
  4. <ul class="nav nav-pills">
  5. <li role="presentation" class="active"><a href="#">Home</a></li>
  6. <li role="presentation"><a href="#">Profile</a></li>
  7. <li role="presentation"><a href="#">Messages</a></li>
  8. </ul>
  9. <script type="text/javascript" src="bundle.js"></script>
  10. </body>
  11. </html>

复制代码

再次执行转译：

  1. webpack

复制代码

打开浏览器：

  1. open c.html

复制代码

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

引入jquery

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

首先安装jquery：

  1. npm i jquery

复制代码

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

  1. plugins: [
  2. new webpack.ProvidePlugin({
  3. $: "jquery",
  4. jQuery: "jquery"
  5. })
  6. ]

复制代码

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

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

复制代码

如果成功，说明jquery加载成功。这样你就可以在入口js文件内加载bootstrap.js了：

  1. import 'bootstrap/dist/js/bootstrap.js'

复制代码

排除错误

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

  1. {
  2. test: /\.css$/,
  3. include: [
  4. path.resolve(__dirname, "not_exist_path")
  5. ],
  6. loader: "style!css"
  7. }

复制代码

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

Webpack 引入bootstrap的更多相关文章

  1. webpack 引入 bootstrap

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

  2. vue引入bootstrap——webpack

    想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行. 1.引入jquery 2.引入bootstrap   阅读本文前,应该能够搭建环境,使用vue-cli进行项目的创建,可以参考 ...

  3. vue项目引入bootstrap、jquery

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  4. vue-cli如何引入bootstrap工具

    以下操作以正常安装node环境为前提. 1.引入jq: 在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用c ...

  5. vue2.x利用脚手架快速构建项目并引入bootstrap、jquery

    要使用vue-cli脚手架搭建项目,首先需要安装node.js Node.js官网:https://nodejs.org/en/download/ 选择你对应的系统即可下载,下载完成后傻瓜式安装即可. ...

  6. Vue中引入bootstrap导致的CSS问题

    最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...

  7. vuejs 使用vue-cli引入bootstrap

    前言:对于刚刚进入vuejs的队伍中的小白来讲,很多都是模糊的,js操作dom节点的思想萦绕,还不能自由切换在二者之间. 解决之道: 想要在vue中引入bootstrap,引入的时候需要按照如下的步骤 ...

  8. 在进行vue的学习，项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  9. vue项目中引入bootstrap

    (1)引入Jquery文件,需要在bootstrap.min.js 之前引入. 1.npm install jquery --save-dev 2. plugins: [ new webpack.Pr ...

随机推荐

  1. phpexcle 导出数据 日期格式的问题

    在使用phpexcle 读取excle中日期格式的出现了问题.特此记录 gmdate("Y-m-d H:i:s", PHPExcel_Shared_Date::ExcelToPHP ...

  2. Invalid property 'driver_class' of bean class

    1.错误描述 INFO:2015-05-01 13:06:07[localhost-startStop-1] - Initializing c3p0-0.9.2.1 [built 20-March-2 ...

  3. 快速开发 HTML5 交互式地铁线路图

    前言 前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是 ...

  4. Codeforces Round #427 (Div. 2) D - Palindromic characteristics

    本题是个简单的区间dp 最近都没时间做题了,被我妈强制喊回去,然后颓废了10天(回家也没发控制住自己= = 我的锅),计划都打乱了,本来还报名了百度之星,然后没时间参加 #include<cma ...

  5. Minimum Inversion Number~hdu 1394

    The inversion number of a given number sequence a1, a2, ..., an is the number of pairs (ai, aj) that ...

  6. jquery回调函数的一个案例

    1.引言 今天在学习<jQuery基础教程>在学习编写插件的时候,书中说利用回调函数来当参数,会极大的提高程序的灵活性.对回调函数很陌生.研究了一下给的示例程序.感觉对回调函数有了基本的了 ...

  7. PyCharm链接服务器同步代码

    准备工作 1:服务器(本地虚拟安装或是云服务器)这里我使用的是腾讯云服务器 2:PyCharm开发软件 3:XShell 软件 第一步:打开PyCharm如下图新建一个项目 Location:选择代码 ...

  8. 学习一之UML类图

    前言 最近在学习程杰老师的<大话设计模式>,觉得非常不错,就做了一些学习笔记和总结.如果对设计模式很感兴趣的,可以直接阅读书籍,相信会有更多的收获. 本人小菜一枚,如果理解的不对的还请多多 ...

  9. JAVA IDE IntelliJ IDEA 快捷键使用详记

    一.高效定位代码 1.项目之间的跳转 Ctrl + Alt + [  :切换到下一个项目窗口 Ctrl + Alt + ]  :  切换到上一个项目窗口 2.文件之间的跳转↑↓←→ Ctrl + E ...

  10. Python Cookbook(第3版)中文版：15.17 传递文件名给C扩展

    15.17 传递文件名给C扩展¶ 问题¶ 你需要向C库函数传递文件名,但是需要确保文件名根据系统期望的文件名编码方式编码过. 解决方案¶ 写一个接受一个文件名为参数的扩展函数,如下这样: static ...