本文首發(fā)于Array_Huang的技術(shù)博客——
實(shí)用至上寨昙，非經(jīng)作者同意灶挟，請(qǐng)勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000007043716
如果您對(duì)本系列文章感興趣紧帕，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang
前言
一般我們用bootstrap吶郁副，都是用的從官網(wǎng)或github下載下來build好了的版本，千人一臉吶多沒意思页徐。當(dāng)然苏潜，官網(wǎng)也給我們提供了自定義的工具，如下圖所示变勇，但每次要改些什么就要重新在官網(wǎng)上打包一份恤左，而且還是個(gè)國外的網(wǎng)站，甭提有多煩躁了。
那么飞袋，有沒有辦法讓我們隨時(shí)隨地都能根據(jù)業(yè)務(wù)的需要來自定義bootstrap呢戳气？答案自然是肯定的，webpack有啥干不了的呀（大誤）[手動(dòng)滑稽]
sass/less的兩套方案
bootstrap主要由兩部分組成：樣式和jQuery插件授嘀。這里要說的是樣式物咳，bootstrap有l(wèi)ess的方案锣险，也有sass的方案蹄皱，因此，也存在兩個(gè)loader分別對(duì)應(yīng)這兩套方案：less <=> bootstrap-webpack 和 sass <=> bootstrap-loader 芯肤。
我個(gè)人慣用的是less巷折，因此本文以bootstrap-webpack為例來介紹如何打造一個(gè)自定義的bootstrap。
開工了崖咨！
先引入全局的jQuery
眾所周知锻拘，bootstrap這貨指明是要全局的jQuery的，甭以為現(xiàn)在用webpack打包的就有什么突破了击蹲。引入全局jQuery的方法請(qǐng)看我之前的這篇文章《webpack多頁應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟署拟，怎么兼容？》（ProvidePlugin + expose-loader）歌豺，我的腳手架項(xiàng)目Array-Huang/webpack-seed也是使用的這套方案推穷。
如何加載bootstrap配置？
bootstrap-webpack提供一個(gè)默認(rèn)選配下的bootstrap类咧，不過默認(rèn)的我要你何用（摔
好馒铃，言歸正題，我們首先需要新建兩個(gè)配置文件bootstrap.config.js和bootstrap.config.less痕惋，并將這倆文件放在同一級(jí)目錄下（像我就把業(yè)務(wù)代碼里用到的config全部丟到同一個(gè)目錄里了哈哈哈）区宇。
因?yàn)槊總€(gè)頁面都需要，也只需要引用一次值戳，因此我們可以找個(gè)每個(gè)頁面都會(huì)加載的公共模塊(用Array-Huang/webpack-seed來舉例就是src/public-resource/logic/common.page.js议谷，我每個(gè)頁面都會(huì)加載這個(gè)js模塊)來加載bootstrap：
require('!!bootstrap-webpack!bootstrapConfig'); // bootstrapConfig是我在webpack配置文件中設(shè)好的alias，不設(shè)的話這里就填實(shí)際的路徑就好了
上文已經(jīng)說到堕虹，bootstrap-webpack其實(shí)就是一個(gè)webpack的loader柿隙，所以這里是用loader的語法。需要注意的是鲫凶，如果你在webpack配置文件中針對(duì)js文件設(shè)置了loader（比如說babel）禀崖，那么在加載bootstrap-webpack的時(shí)候請(qǐng)?jiān)谧钋懊婕觽€(gè)!!，表示這個(gè)require語句忽略webpack配置文件中所有l(wèi)oader的配置螟炫，還有其它的用法波附，看自己需要哈：
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？
上文提到有兩個(gè)配置文件，bootstrap.config.js和bootstrap.config.less掸屡，顯然封寞，它們的作用是不一樣的。
bootstrap.config.js
bootstrap.config.js的作用就是配置需要加載哪些組件的樣式和哪些jQuery插件仅财，可配置的內(nèi)容跟官網(wǎng)是一致的狈究，官方給出這樣的例子：
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,
}
};
當(dāng)時(shí)我是一下子懵逼了，就這么幾個(gè)盏求？完整的例子/文檔在哪里抖锥？后來終于被我找到默認(rèn)的配置了，直接拿過來在上面改改就能用了：
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項(xiàng)就是jQuery插件了碎罚，而styles項(xiàng)則是樣式磅废，可以分別對(duì)照著bootstrap英文版文檔來查看。
需要解釋的是styleLoader項(xiàng)荆烈，這表示用什么loader來加載bootstrap的樣式拯勉，相當(dāng)于webpack配置文件中針對(duì).less文件的loader配置項(xiàng)吧，這里我也是直接從webpack配置文件里抄過來的憔购。
另外宫峦，由于我使用了iconfont作為圖標(biāo)的解決方案，因此就去掉了glyphicons玫鸟；如果你要使用glyphicons的話导绷，請(qǐng)務(wù)必在webpack配置中設(shè)置好針對(duì)各類字體文件的loader配置，否則可是會(huì)報(bào)錯(cuò)的哦鞋邑。
bootstrap.config.less
bootstrap.config.less配置的是less變量诵次，bootstarp官網(wǎng)上也有相同的配置，這里就不多做解釋了枚碗，直接放個(gè)官方例子：
@font-size-base: 24px;
@btn-default-color: #444;
@btn-default-bg: #eee;
需要注意的是逾一，我一開始只用了bootstrap.config.js而沒建bootstrap.config.less，結(jié)果發(fā)現(xiàn)報(bào)錯(cuò)了肮雨，還來建了個(gè)空的bootstrap.config.less就編譯成功了遵堵，因此，無論你有沒有配置less變量的需要怨规，都請(qǐng)新建一個(gè)bootstrap.config.less陌宿。
總結(jié)
至此，一個(gè)可自定義的bootstrap就出爐了波丰，你想怎么折騰都行了壳坪，什么不用的插件不用的樣式，統(tǒng)統(tǒng)給它去掉掰烟，把體積減到最小爽蝴，哈哈哈沐批。
后話
此方案有個(gè)缺點(diǎn)：此方案相當(dāng)于每次編譯項(xiàng)目時(shí)都把整個(gè)bootstrap編譯一遍，而bootstrap是一個(gè)龐大的庫蝎亚，每次編譯都會(huì)耗費(fèi)不少的時(shí)間九孩，如果只是編譯一次也就算了，每次都要耗這時(shí)間那可真惡心呢发框。所以躺彬，我打算折騰一下看能不能有所改進(jìn)，在這里先記錄下原始的方案梅惯，后面如果真能改進(jìn)會(huì)繼續(xù)寫文的了哈宪拥。
示例代碼
諸位看本系列文章，搭配我在Github上的腳手架項(xiàng)目食用更佳哦（笑）：Array-Huang/webpack-seed（https://github.com/Array-Huang/webpack-seed）个唧。
附系列文章目錄（同步更新）
- webpack多頁應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)
- webpack多頁應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些江解？
- webpack多頁應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)设预？
- webpack多頁應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟徙歼，怎么兼容？
- webpack多頁應(yīng)用架構(gòu)系列（五）：聽說webpack連less/css也能打包鳖枕？
- webpack多頁應(yīng)用架構(gòu)系列（六）：聽說webpack連圖片和字體也能打包魄梯？
- webpack多頁應(yīng)用架構(gòu)系列（七）：開發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚宾符？
- webpack多頁應(yīng)用架構(gòu)系列（八）：教練我要寫ES6酿秸！webpack怎么整合Babel？
- webpack多頁應(yīng)用架構(gòu)系列（九）：總有刁民想害朕魏烫！ESLint為你阻擊垃圾代碼
- webpack多頁應(yīng)用架構(gòu)系列（十）：如何打造一個(gè)自定義的bootstrap
- webpack多頁應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll辣苏，實(shí)現(xiàn)webpack音速編譯
- webpack多頁應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁&頁面模板
- webpack多頁應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個(gè)簡單的模板布局系統(tǒng)
- webpack多頁應(yīng)用架構(gòu)系列（十四）：No復(fù)制粘貼！多項(xiàng)目共用基礎(chǔ)設(shè)施
- webpack多頁應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開發(fā)模式下夾縫生存
本文首發(fā)于Array_Huang的技術(shù)博客——
實(shí)用至上哄褒，非經(jīng)作者同意稀蟋，請(qǐng)勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000007043716
如果您對(duì)本系列文章感興趣呐赡，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang
