如何打造一个自定义的bootstrap？

那么，有没有办法让我们随时随地都能根据业务的需要来自定义bootstrap呢？答案自然是肯定的，webpack有啥干不了的呀（大误）[手动滑稽]

bootstrap主要由两部分组成：样式和jQuery插件。这里要说的是样式，bootstrap有less的方案，也有sass的方案，因此，也存在两个loader分别对应这两套方案：less <=> bootstrap-webpack 和 sass <=> 。

我个人惯用的是less，因此本文以bootstrap-webpack为例来介绍如何打造一个自定义的bootstrap。

众所周知，bootstrap这货指明是要全局的jQuery的，甭以为现在用webpack打包的就有什么突破了。引入全局jQuery的方法请看这篇文章《老式jQuery插件还不能丢，怎么兼容？》（ProvidePlugin + expose-loader），我的脚手架项目也是使用的这套方案。

bootstrap-webpack提供一个默认选配下的bootstrap，不过默认的我要你何用（摔

因为每个页面都需要，也只需要引用一次，因此我们可以找个每个页面都会加载的公共模块(用Array-Huang/webpack-seed来举例就是src/public-resource/logic/common.page.js，我每个页面都会加载这个js模块)来加载bootstrap：

上文已经说到，bootstrap-webpack其实就是一个webpack的loader，所以这里是用loader的语法。需要注意的是，如果你在webpack配置文件中针对js文件设置了loader（比如说babel），那么在加载bootstrap-webpack的时候请在最前面加个，表示这个require语句忽略webpack配置文件中所有loader的配置，还有其它的用法，看自己需要哈：

上文提到有两个配置文件，bootstrap.config.js和bootstrap.config.less，显然，它们的作用是不一样的。

bootstrap.config.js

bootstrap.config.js的作用就是配置需要加载哪些组件的样式和哪些jQuery插件，可配置的内容跟官网是一致的，官方给出这样的例子：

当时我是一下子懵逼了，就这么几个？完整的例子/文档在哪里？后来终于被我找到默认的配置了，直接拿过来在上面改改就能用了：

需要解释的是项，这表示用什么loader来加载bootstrap的样式，相当于webpack配置文件中针对.less文件的loader配置项吧，这里我也是直接从webpack配置文件里抄过来的。

另外，由于我使用了iconfont作为图标的解决方案，因此就去掉了glyphicons；如果你要使用glyphicons的话，请务必在webpack配置中设置好针对各类字体文件的loader配置，否则可是会报错的哦。

bootstrap.config.less

bootstrap.config.less配置的是less变量，bootstarp官网上也有相同的配置，这里就不多做解释了，直接放个官方例子：

需要注意的是，我一开始只用了bootstrap.config.js而没建bootstrap.config.less，结果发现报错了，还来建了个空的就编译成功了，因此，无论你有没有配置less变量的需要，都请新建一个bootstrap.config.less。

至此，一个可自定义的bootstrap就出炉了，你想怎么折腾都行了，什么不用的插件不用的样式，统统给它去掉，把体积减到最小，哈哈哈。

此方案有个缺点：此方案相当于每次编译项目时都把整个bootstrap编译一遍，而bootstrap是一个庞大的库，每次编译都会耗费不少的时间，如果只是编译一次也就算了，每次都要耗这时间那可真恶心呢。所以，我打算折腾一下看能不能有所改进，在这里先记录下原始的方案，后面如果真能改进会继续写文的了哈。