| #### | |
| MacOS | |
| #### | |
| # Although configured against Big Sur, should be backward compatible | |
| # Make sure you have installed the latest MacOS security patches before continuing | |
| #### | |
| XCode | |
| #### | |
| # Install XCode, messing with XCode CMD Tools can be sloppy; take the 1.2Gb loss now :( |
| Took me 10 minutes to find how to configure Webpack's plugin system to leverage Bootstrap 4. | |
| Also see my other Gist for [installing and configuring Bootstrap 4](https://gist.github.com/chrisalexander55/81f3d5db057fbcbd74d62d488adbca8a). | |
| ``` | |
| plugins: [ | |
| new Webpack.ProvidePlugin({ | |
| $: 'jquery', | |
| jQuery: 'jquery', | |
| 'window.jQuery': 'jquery', | |
| Popper: ['popper.js', 'default'], |
Although I followed the excellent directions provided by the Boostrap 4 documentation, I found it incomplete. Here are the missing steps:
# install dependencies
npm i jquery popper.js [email protected] --save
# install dev-dependencies
npm i precss --save-dev
# use the following webpack postcss-loader config
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> | |
| <meta http-equiv="Strict-Transport-Security" content="max-age=63072000"> | |
| <meta http-equiv="X-Content-Type-Options" content="nosniff"> | |
| <meta http-equiv="Window-Target" content="_value"> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> | |
| <meta http-equiv="Strict-Transport-Security" content="max-age=63072000"> | |
| <meta http-equiv="X-Content-Type-Options" content="nosniff"> | |
| <meta http-equiv="Window-Target" content="_value"> |
| const path = require('path'); | |
| const Webpack = require('webpack'); | |
| // webpack plugins | |
| const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin'); | |
| module.exports = { | |
| entry: { | |
| 'js/vendor': './src/app/js/vendor.js', |
| const path = require('path'); | |
| const webpack = require('webpack'); | |
| const webpackMerge = require('webpack-merge'); | |
| const webpackCommon = require('./dev.common.config'); | |
| const env = require('../env'); | |
| const proxyRules = require('../src/app/js/shared/proxy/config'); | |
| // webpack plugins | |
| const HtmlWebpackPlugin = require('html-webpack-plugin'); |