使用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.gitnpm installnpm 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 extractStylesif (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