本文首發于Array_Huang的技術博客——
實用至上，非經作者同意，請勿轉載。
原文地址：https://segmentfault.com/a/1190000007043716
如果您對本系列文章感興趣，歡迎關注訂閱這里：https://segmentfault.com/blog/array_huang
前言
一般我們用bootstrap吶，都是用的從官網或github下載下來build好了的版本，千人一臉吶多沒意思。當然，官網也給我們提供了自定義的工具，如下圖所示，但每次要改些什么就要重新在官網上打包一份，而且還是個國外的網站，甭提有多煩躁了。
那么，有沒有辦法讓我們隨時隨地都能根據業務的需要來自定義bootstrap呢？答案自然是肯定的，webpack有啥干不了的呀（大誤）[手動滑稽]
sass/less的兩套方案
bootstrap主要由兩部分組成：樣式和jQuery插件。這里要說的是樣式，bootstrap有less的方案，也有sass的方案，因此，也存在兩個loader分別對應這兩套方案：less <=> bootstrap-webpack 和 sass <=> bootstrap-loader 。
我個人慣用的是less，因此本文以bootstrap-webpack為例來介紹如何打造一個自定義的bootstrap。
開工了！
先引入全局的jQuery
眾所周知，bootstrap這貨指明是要全局的jQuery的，甭以為現在用webpack打包的就有什么突破了。引入全局jQuery的方法請看我之前的這篇文章《webpack多頁應用架構系列（四）：老式jQuery插件還不能丟，怎么兼容？》（ProvidePlugin + expose-loader），我的腳手架項目Array-Huang/webpack-seed也是使用的這套方案。
如何加載bootstrap配置？
bootstrap-webpack提供一個默認選配下的bootstrap，不過默認的我要你何用（摔
好，言歸正題，我們首先需要新建兩個配置文件bootstrap.config.js和bootstrap.config.less，并將這倆文件放在同一級目錄下（像我就把業務代碼里用到的config全部丟到同一個目錄里了哈哈哈）。
因為每個頁面都需要，也只需要引用一次，因此我們可以找個每個頁面都會加載的公共模塊(用Array-Huang/webpack-seed來舉例就是src/public-resource/logic/common.page.js，我每個頁面都會加載這個js模塊)來加載bootstrap：
require('!!bootstrap-webpack!bootstrapConfig'); // bootstrapConfig是我在webpack配置文件中設好的alias，不設的話這里就填實際的路徑就好了
上文已經說到，bootstrap-webpack其實就是一個webpack的loader，所以這里是用loader的語法。需要注意的是，如果你在webpack配置文件中針對js文件設置了loader（比如說babel），那么在加載bootstrap-webpack的時候請在最前面加個!!，表示這個require語句忽略webpack配置文件中所有loader的配置，還有其它的用法，看自己需要哈：
adding ! to a request will disable configured preLoaders
adding !! to a request will disable all loaders specified in the configuration
adding -! to a request will disable configured preLoaders and loaders but not the postLoaders
如何配置bootstrap？
上文提到有兩個配置文件，bootstrap.config.js和bootstrap.config.less，顯然，它們的作用是不一樣的。
bootstrap.config.js
bootstrap.config.js的作用就是配置需要加載哪些組件的樣式和哪些jQuery插件，可配置的內容跟官網是一致的，官方給出這樣的例子：
module.exports = {
scripts: {
// add every bootstrap script you need
'transition': true
},
styles: {
// add every bootstrap style you need
"mixins": true,
"normalize": true,
"print": true,
"scaffolding": true,
"type": true,
}
};
當時我是一下子懵逼了，就這么幾個？完整的例子/文檔在哪里？后來終于被我找到默認的配置了，直接拿過來在上面改改就能用了：
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
styleLoader: ExtractTextPlugin.extract('css?minimize&-autoprefixer!postcss!less'),
scripts: {
transition: true,
alert: true,
button: true,
carousel: true,
collapse: true,
dropdown: true,
modal: true,
tooltip: true,
popover: true,
scrollspy: true,
tab: true,
affix: true,
},
styles: {
mixins: true,
normalize: true,
print: true,
scaffolding: true,
type: true,
code: true,
grid: true,
tables: true,
forms: true,
buttons: true,
'component-animations': true,
glyphicons: false,
dropdowns: true,
'button-groups': true,
'input-groups': true,
navs: true,
navbar: true,
breadcrumbs: true,
pagination: true,
pager: true,
labels: true,
badges: true,
jumbotron: true,
thumbnails: true,
alerts: true,
'progress-bars': true,
media: true,
'list-group': true,
panels: true,
wells: true,
close: true,
modals: true,
tooltip: true,
popovers: true,
carousel: true,
utilities: true,
'responsive-utilities': true,
},
};
這里的scripts項就是jQuery插件了，而styles項則是樣式，可以分別對照著bootstrap英文版文檔來查看。
需要解釋的是styleLoader項，這表示用什么loader來加載bootstrap的樣式，相當于webpack配置文件中針對.less文件的loader配置項吧，這里我也是直接從webpack配置文件里抄過來的。
另外，由于我使用了iconfont作為圖標的解決方案，因此就去掉了glyphicons；如果你要使用glyphicons的話，請務必在webpack配置中設置好針對各類字體文件的loader配置，否則可是會報錯的哦。
bootstrap.config.less
bootstrap.config.less配置的是less變量，bootstarp官網上也有相同的配置，這里就不多做解釋了，直接放個官方例子：
@font-size-base: 24px;
@btn-default-color: #444;
@btn-default-bg: #eee;
需要注意的是，我一開始只用了bootstrap.config.js而沒建bootstrap.config.less，結果發現報錯了，還來建了個空的bootstrap.config.less就編譯成功了，因此，無論你有沒有配置less變量的需要，都請新建一個bootstrap.config.less。
總結
至此，一個可自定義的bootstrap就出爐了，你想怎么折騰都行了，什么不用的插件不用的樣式，統統給它去掉，把體積減到最小，哈哈哈。
后話
此方案有個缺點：此方案相當于每次編譯項目時都把整個bootstrap編譯一遍，而bootstrap是一個龐大的庫，每次編譯都會耗費不少的時間，如果只是編譯一次也就算了，每次都要耗這時間那可真惡心呢。所以，我打算折騰一下看能不能有所改進，在這里先記錄下原始的方案，后面如果真能改進會繼續寫文的了哈。
示例代碼
諸位看本系列文章，搭配我在Github上的腳手架項目食用更佳哦（笑）：Array-Huang/webpack-seed（https://github.com/Array-Huang/webpack-seed）。
附系列文章目錄（同步更新）
- webpack多頁應用架構系列（一）：一步一步解決架構痛點
- webpack多頁應用架構系列（二）：webpack配置常用部分有哪些？
- webpack多頁應用架構系列（三）：怎么打包公共代碼才能避免重復？
- webpack多頁應用架構系列（四）：老式jQuery插件還不能丟，怎么兼容？
- webpack多頁應用架構系列（五）：聽說webpack連less/css也能打包？
- webpack多頁應用架構系列（六）：聽說webpack連圖片和字體也能打包？
- webpack多頁應用架構系列（七）：開發環境、生產環境傻傻分不清楚？
- webpack多頁應用架構系列（八）：教練我要寫ES6！webpack怎么整合Babel？
- webpack多頁應用架構系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼
- webpack多頁應用架構系列（十）：如何打造一個自定義的bootstrap
- webpack多頁應用架構系列（十一）：預打包Dll，實現webpack音速編譯
- webpack多頁應用架構系列（十二）：利用webpack生成HTML普通網頁&頁面模板
- webpack多頁應用架構系列（十三）：構建一個簡單的模板布局系統
- webpack多頁應用架構系列（十四）：No復制粘貼！多項目共用基礎設施
- webpack多頁應用架構系列（十五）：論前端如何在后端渲染開發模式下夾縫生存
本文首發于Array_Huang的技術博客——
實用至上，非經作者同意，請勿轉載。
原文地址：https://segmentfault.com/a/1190000007043716
如果您對本系列文章感興趣，歡迎關注訂閱這里：https://segmentfault.com/blog/array_huang
