Webpack - 引入Bootstrap3

  • 作者:KK

  • 发表日期:2018.8.11


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

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

示例项目中主要就是通过全局变量提供器提供了$jQuery两个变量以及引入了bootstrap-loaderbootstrap-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.jsonpackage-lock.json的描述去安装各种模块。

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


其它

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