Webpack CSS, Preprocessors, and url assets

Any reason why webpack uses the "bang" symbol to pass through multiple loaders instead of a pipe (like in standard Unix)?

Not sure. But you can use the array syntax instead (when doing this, you use loaders rather than loader): loaders: ['style', 'css']

Will this same setup work when using webpack -p to process all the code prior deploying the app?

Yes

Would the same technique you used for bundling index.css by requiring it in index.js (removing the need for it's link tag) work for the link tag for the bootstrap.css as well? I'm guessing it's a little more involved as bootstrap is in node_modules, which is excluded in webpack.config.js

Actually, you could/should definitely do the same for those assets as well:

require('bootstrap/dist/css/bootstrap.css')