rails6 + webpacker + bootstrap

rails6_webpacker_bootstrap.md

$ rails new myapp
$ cd myapp
$ yarn add bootstrap jquery popper.js
$ mkdir myapp/app/javascript/packs/stylesheets
$ touch myapp/app/javascript/packs/stylesheets/application.scss

git diff default/config/webpack/environment.js myapp/config/webpack/environment.js
diff --git a/default/config/webpack/environment.js b/myapp/config/webpack/environment.js
index d16d9af..2ce0904 100644
--- a/default/config/webpack/environment.js
+++ b/myapp/config/webpack/environment.js
@@ -1,3 +1,12 @@
 const { environment } = require('@rails/webpacker')
 
+const webpack = require('webpack')
+environment.plugins.append('Provide',
+  new webpack.ProvidePlugin({
+    $: 'jquery',
+    jQuery: 'jquery',
+    Popper: ['popper.js', 'default']
+  })
+)
+
 module.exports = environment

// app/javascript/packs/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap";
@import "./custom";

git diff default/app/javascript/packs/application.js myapp/app/javascript/packs/application.js
diff --git a/default/app/javascript/packs/application.js b/myapp/app/javascript/packs/application.js
index 9cd55d4..1e3d014 100644
--- a/default/app/javascript/packs/application.js
+++ b/myapp/app/javascript/packs/application.js
@@ -15,3 +15,6 @@ require("channels")
 //
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
+
+import 'bootstrap'
+import '../packs/stylesheets/application'