Webpack: src in app/frontend, selective JS bootstrap

app/assets/config/manifest.js

@@ -1,3 +1 @@
 //= link_tree ../images
-//= link_directory ../javascripts .js
-//= link_directory ../stylesheets .css

app/frontend/packs/application.js

@@ -7,8 +7,11 @@
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 
-import 'bootstrap'
-import './src/application.scss'
 import Rails from 'rails-ujs';
 
+import 'bootstrap/js/dist/collapse';
+import 'bootstrap/js/dist/dropdown';
+
+import '../scss';
+
 Rails.start()

app/frontend/scss/index.js

@@ -0,0 +1 @@
+import './index.scss';

app/frontend/scss/index.scss

@@ -1,2 +1,3 @@
 @import '~bootstrap/scss/bootstrap';
+@import 'layout';
 @import 'components/users';

app/frontend/scss/layout.scss

@@ -0,0 +1,15 @@
+@import '~bootstrap/scss/_functions';
+@import '~bootstrap/scss/_variables';
+@import '~bootstrap/scss/mixins/_breakpoints';
+
+.navbar {
+  margin-bottom: 30px;
+
+  @include media-breakpoint-down(sm) {
+    margin-bottom: 20px;
+  }
+}
+
+.alert-layout {
+  margin-bottom: 30px;
+}

config/webpack/environment.js

@@ -1,3 +1,12 @@
+const webpack = require('webpack')
 const { environment } = require('@rails/webpacker')
 
+environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
+  $: 'jquery',
+  jQuery: 'jquery',
+  Popper: ['popper.js', 'default'],
+  Util: "exports-loader?Util!bootstrap/js/dist/util",
+}))
+
+
 module.exports = environment

config/webpacker.yml

@@ -1,7 +1,7 @@
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
-  source_path: app/javascript
+  source_path: app/frontend
   source_entry_path: packs
   public_output_path: packs
   cache_path: tmp/cache/webpacker

package.json

@@ -9,6 +9,7 @@
     "rails-ujs": "^5.2.0"
   },
   "devDependencies": {
+    "exports-loader": "^0.7.0",
     "webpack-dev-server": "2.11.2"
   }
 }

yarn.lock

@@ -1997,6 +1997,13 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
+exports-loader@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/exports-loader/-/exports-loader-0.7.0.tgz#84881c784dea6036b8e1cd1dac3da9b6409e21a5"
+  dependencies:
+    loader-utils "^1.1.0"
+    source-map "0.5.0"
+
 express@^4.16.2:
   version "4.16.3"
   resolved "https://registry.yarnpkg.com/express/-/express-4.16.3.tgz#6af8a502350db3246ecc4becf6b5a34d22f7ed53"
@@ -5234,6 +5241,10 @@ source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
 
+source-map@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.0.tgz#0fe96503ac86a5adb5de63f4e412ae4872cdbe86"
+
 source-map@^0.4.2:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"