摘要：我個(gè)人慣用的是，因此本文以為例來(lái)介紹如何打造一個(gè)自定義的。引入全局的方法請(qǐng)看我之前的這篇文章多頁(yè)應(yīng)用架構(gòu)系列四老式插件還不能丟，怎么兼容，我的腳手架項(xiàng)目也是使用的這套方案。

本文首發(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下載下來(lái)build好了的版本，千人一臉吶多沒(méi)意思。當(dāng)然，官網(wǎng)也給我們提供了自定義的工具，如下圖所示，但每次要改些什么就要重新在官網(wǎng)上打包一份，而且還是個(gè)國(guó)外的網(wǎng)站，甭提有多煩躁了。

那么，有沒(méi)有辦法讓我們隨時(shí)隨地都能根據(jù)業(yè)務(wù)的需要來(lái)自定義bootstrap呢？答案自然是肯定的，webpack有啥干不了的呀（大誤）[手動(dòng)滑稽]

bootstrap主要由兩部分組成：樣式和jQuery插件。這里要說(shuō)的是樣式，bootstrap有l(wèi)ess的方案，也有sass的方案，因此，也存在兩個(gè)loader分別對(duì)應(yīng)這兩套方案：less <=> bootstrap-webpack 和 sass <=> bootstrap-loader 。

我個(gè)人慣用的是less，因此本文以bootstrap-webpack為例來(lái)介紹如何打造一個(gè)自定義的bootstrap。

眾所周知，bootstrap這貨指明是要全局的jQuery的，甭以為現(xiàn)在用webpack打包的就有什么突破了。引入全局jQuery的方法請(qǐng)看我之前的這篇文章《webpack多頁(yè)應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟，怎么兼容？》（ProvidePlugin + expose-loader），我的腳手架項(xiàng)目Array-Huang/webpack-seed也是使用的這套方案。

bootstrap-webpack提供一個(gè)默認(rèn)選配下的bootstrap，不過(guò)默認(rèn)的我要你何用（摔

好，言歸正題，我們首先需要新建兩個(gè)配置文件bootstrap.config.js和bootstrap.config.less，并將這倆文件放在同一級(jí)目錄下（像我就把業(yè)務(wù)代碼里用到的config全部丟到同一個(gè)目錄里了哈哈哈）。

因?yàn)槊總€(gè)頁(yè)面都需要，也只需要引用一次，因此我們可以找個(gè)每個(gè)頁(yè)面都會(huì)加載的公共模塊(用Array-Huang/webpack-seed來(lái)舉例就是src/public-resource/logic/common.page.js，我每個(gè)頁(yè)面都會(huì)加載這個(gè)js模塊)來(lái)加載bootstrap：

require("!!bootstrap-webpack!bootstrapConfig"); // bootstrapConfig是我在webpack配置文件中設(shè)好的alias，不設(shè)的話(huà)這里就填實(shí)際的路徑就好了

上文已經(jīng)說(shuō)到，bootstrap-webpack其實(shí)就是一個(gè)webpack的loader，所以這里是用loader的語(yǔ)法。需要注意的是，如果你在webpack配置文件中針對(duì)js文件設(shè)置了loader（比如說(shuō)babel），那么在加載bootstrap-webpack的時(shí)候請(qǐng)?jiān)谧钋懊婕觽€(gè)!!，表示這個(gè)require語(yǔ)句忽略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

上文提到有兩個(gè)配置文件，bootstrap.config.js和bootstrap.config.less，顯然，它們的作用是不一樣的。

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è)？完整的例子/文檔在哪里？后來(lái)終于被我找到默認(rèn)的配置了，直接拿過(guò)來(lái)在上面改改就能用了：

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英文版文檔來(lái)查看。

需要解釋的是styleLoader項(xiàng)，這表示用什么loader來(lái)加載bootstrap的樣式，相當(dāng)于webpack配置文件中針對(duì).less文件的loader配置項(xiàng)吧，這里我也是直接從webpack配置文件里抄過(guò)來(lái)的。

另外，由于我使用了iconfont作為圖標(biāo)的解決方案，因此就去掉了glyphicons；如果你要使用glyphicons的話(huà)，請(qǐng)務(wù)必在webpack配置中設(shè)置好針對(duì)各類(lèi)字體文件的loader配置，否則可是會(huì)報(bào)錯(cuò)的哦。

bootstrap.config.less配置的是less變量，bootstarp官網(wǎng)上也有相同的配置，這里就不多做解釋了，直接放個(gè)官方例子：

@font-size-base: 24px;
@btn-default-color: #444;
@btn-default-bg: #eee;

需要注意的是，我一開(kāi)始只用了bootstrap.config.js而沒(méi)建bootstrap.config.less，結(jié)果發(fā)現(xiàn)報(bào)錯(cuò)了，還來(lái)建了個(gè)空的bootstrap.config.less就編譯成功了，因此，無(wú)論你有沒(méi)有配置less變量的需要，都請(qǐng)新建一個(gè)bootstrap.config.less。

至此，一個(gè)可自定義的bootstrap就出爐了，你想怎么折騰都行了，什么不用的插件不用的樣式，統(tǒng)統(tǒng)給它去掉，把體積減到最小，哈哈哈。

此方案有個(gè)缺點(diǎn)：此方案相當(dāng)于每次編譯項(xiàng)目時(shí)都把整個(gè)bootstrap編譯一遍，而bootstrap是一個(gè)龐大的庫(kù)，每次編譯都會(huì)耗費(fèi)不少的時(shí)間，如果只是編譯一次也就算了，每次都要耗這時(shí)間那可真惡心呢。所以，我打算折騰一下看能不能有所改進(jìn)，在這里先記錄下原始的方案，后面如果真能改進(jìn)會(huì)繼續(xù)寫(xiě)文的了哈。

諸位看本系列文章，搭配我在Github上的腳手架項(xiàng)目食用更佳哦（笑）：Array-Huang/webpack-seed（https://github.com/Array-Huang/webpack-seed）。

webpack多頁(yè)應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)：https://segmentfault.com/a/1190000006843916

webpack多頁(yè)應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多頁(yè)應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？：https://segmentfault.com/a/1190000006871991

webpack多頁(yè)應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多頁(yè)應(yīng)用架構(gòu)系列（五）：聽(tīng)說(shuō)webpack連less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多頁(yè)應(yīng)用架構(gòu)系列（六）：聽(tīng)說(shuō)webpack連圖片和字體也能打包？:https://segmentfault.com/a/1190000006907701

webpack多頁(yè)應(yīng)用架構(gòu)系列（七）：開(kāi)發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多頁(yè)應(yīng)用架構(gòu)系列（八）：教練我要寫(xiě)ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

webpack多頁(yè)應(yīng)用架構(gòu)系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼:https://segmentfault.com/a/1190000007030775

webpack多頁(yè)應(yīng)用架構(gòu)系列（十）：如何打造一個(gè)自定義的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多頁(yè)應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實(shí)現(xiàn)webpack音速編譯:https://segmentfault.com/a/1190000007104372

webpack多頁(yè)應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁(yè)&頁(yè)面模板:https://segmentfault.com/a/1190000007126268

webpack多頁(yè)應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個(gè)簡(jiǎn)單的模板布局系統(tǒng):https://segmentfault.com/a/1190000007159115

webpack多頁(yè)應(yīng)用架構(gòu)系列（十四）：No復(fù)制粘貼！多項(xiàng)目共用基礎(chǔ)設(shè)施

webpack多頁(yè)應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開(kāi)發(fā)模式下夾縫生存

webpack多頁(yè)應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

本文首發(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