使用bootstrap-loader来构建应用的完整demo

完整的例子请点击这里. All star and issue welcomed!通过这个例子你会学习到：
(1)如何自定义你的bootstrap样式
(2)如何通过preBootstrapCustomizations，bootstrapCustomizations，appStyles等来覆盖bootstrap默认配置或者定义自己bootstrap配置
(3)关于font-awesome-loader以及tether的相关内容
注意：由于该demo牵涉的内容较多，所以请你多关注在参考资料中的内容

Usage

git clone https://github.com/liangklfangl/bootstrap-loader-demo.git
npm install
npm run bs4:default:dev

Notice

(1)This demo is built on windows platform, if you want to run in linux/mac platform, you can search suggestion here

(2)This demo is built with bootstrap 4 instead of 3. So, ProvidePlugin is added for webpack

 new webpack.ProvidePlugin({
       $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Tether: "tether",
      "window.Tether": "tether",
      Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
      Button: "exports-loader?Button!bootstrap/js/dist/button",
      Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
      Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
      Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
      Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
      Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
      Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
      Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
      Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
      Util: "exports-loader?Util!bootstrap/js/dist/util"
    }),

(3)In dev mode or pro mode, there is a big difference while later will extract css to a separate file which configured in .bootstraprc.

extractStyles: false

webpack configuration like bellow:

//Notice extractStyles
if (bootstraprcCustomLocation) {
  bootstrapProdEntryPoint = 'bootstrap-loader/lib/bootstrap.loader?extractStyles' +
    `&configFilePath=${__dirname}/${bootstraprcCustomLocation}` +
    '!bootstrap-loader/no-op.js';
} else {
  bootstrapProdEntryPoint = 'bootstrap-loader/extractStyles';
}
//as html template followed in pro mode
 <link rel="stylesheet" href="/assets/app.css">
 <script src="/assets/app.js"><\/script>
//only app.js is demostrated bellow
 <script src="/assets/app.js"><\/script> 

(4)next part will inject const jQuery=require("jquery") to our bootstrap file which heavily depend on jQuery

  { test: /bootstrap\/dist\/js\/umd\//, 
    loader: 'imports-loader?jQuery=jquery' 
  }

preview

Reference:

React系列学习笔记：4.React应用中使用Bootstrap

webpack多页应用架构系列（十）：如何打造一个自定义的bootstrap

bootstrap-loader

Magic and useful Tether

import-loader

font awesome:图标字体，完全css控制
font-awesome-loader