Awesome
bootstrap-loader-demo
bootstrap-loader-demo from bootstrap-loader demos
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