Webpack - 引入Bootstrap3

本文导航

  1. 软件依赖
  2. 测试说明
  3. 开发说明
  4. 其它

  • 作者：KK

  • 发表日期：2018.8.11

时有看到一些新手因为Webpack引入Bootstrap3失败而烦恼，我弄了个示例，项目地址是：https://gitee.com/kk8686/webpack-bootstrap3.git

其实没什么特别的东西，不需要手动下载部署 bootstrap.min.js 和 css，只需要 npm 安装一下东西，引入就行了。

示例项目中主要就是通过全局变量提供器提供了$和jQuery两个变量以及引入了bootstrap-loader，bootstrap-loader 这个项目就是用来在 webpack 中引入 Bootstrap3 或 Bootstrap4 的（看你传啥参数吧，官方文档有说明）。

当require('bootstrap-loader')的时候，底层其实把 Bootstrap3 的 CSS 代码注入到了页面的 head 标签里（你可以查看 HTML 找到）。

以上示例项目的部署测试说明：

软件依赖

  1. Node.Js 8.0版本以上。

测试说明

  1. 执行node web.js会启动一个监听8282端口的 http 服务器。

  2. 浏览器访问http://127.0.0.1:8282即可看到效果。

开发说明

  1. 根目录执行npm install会根据package.json和package-lock.json的描述去安装各种模块。

  2. 执行npm run watch会启动webpack构建程序并监听文件修改，改完就启动 web 服务器刷新看看。

其它

注意的是，如果页面一共引入了两个不同的构建 bundle 文件，其中第一个 bundle 引入了bootstrap-loader后，另一个 bundle 无法使用官方的扩展插件方法，比如执行$('#xxx').modal('show')就会提示 modal 不是一个函数。