Skip to content

Instantly share code, notes, and snippets.

Avatar

Chris Alexander chrisalexander55

  • NJ, USA
View GitHub Profile
@chrisalexander55
chrisalexander55 / webpack-plugin-config-bootstrap-4
Last active Sep 16, 2017
Webpack Plugin Config for Bootstrap 4
View webpack-plugin-config-bootstrap-4
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'],
@chrisalexander55
chrisalexander55 / bootstrap-4-webpack-config.md
Last active Sep 29, 2017
Subtle Tweak to get Boostrap 4 Working With Webpack
View bootstrap-4-webpack-config.md

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 bootstrap@4.0.0-beta --save

# install dev-dependencies
npm i precss --save-dev

# use the following webpack postcss-loader config
@chrisalexander55
chrisalexander55 / some-page-1.html
Created Sep 3, 2017
pages/some-page-1.html - correct script paths
View some-page-1.html
<!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">
@chrisalexander55
chrisalexander55 / index.html
Created Sep 3, 2017
index.html - wrong script paths
View index.html
<!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">
@chrisalexander55
chrisalexander55 / dev.common.config.js
Created Sep 2, 2017
dev.common.config.js - Webpack Subdirectory Bundle Injection Silently Fails
View dev.common.config.js
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',
@chrisalexander55
chrisalexander55 / dev.config.js
Last active Sep 2, 2017
dev.config.js - Webpack Subdirectory Bundle Injection Silently Fails
View dev.config.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');
You can’t perform that action at this time.