Include Webpack and use it for jQuery, Bootstrap and chosen.js

config/environments/development.rb

@@ -1,4 +1,6 @@
 Rails.application.configure do
+  # Verifies that versions and hashed value of the package contents in the project's package.json
+  config.webpacker.check_yarn_integrity = true
   # Settings specified here will take precedence over those in config/application.rb.
 
   config.web_console.whitelisted_ips = '192.168.0.0/16'  

config/environments/production.rb

@@ -1,4 +1,6 @@
 Rails.application.configure do
+  # Verifies that versions and hashed value of the package contents in the project's package.json
+  config.webpacker.check_yarn_integrity = false
   # Settings specified here will take precedence over those in config/application.rb.
 
   # Code is not reloaded between requests.

config/initializers/assets.rb

@@ -11,7 +11,7 @@ Rails.application.config.tap do |config|
 
   # Highlight.js
   config.assets.precompile += %w( highlight.min.js )
-  config.assets.precompile += %w( highlight-default.min.css )
+  config.assets.precompile += %w( highlight-default.css )
 
   # d3.tip
   config.assets.precompile += %w( d3-tip.js )
@@ -19,7 +19,7 @@ Rails.application.config.tap do |config|
   # Add additional assets to the asset load path.
   # config.assets.paths << Emoji.images_path
   # Add Yarn node_modules folder to the asset load path.
-  # config.assets.paths << Rails.root.join('node_modules')
+  config.assets.paths << Rails.root.join('node_modules')
 
   # Precompile additional assets.
   # application.js, application.css, and all non-JS/CSS in the app/assets

config/webpack/development.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+const environment = require('./environment');
+
+module.exports = environment;

config/webpack/environment.js

@@ -0,0 +1,30 @@
+/*
+./config/webpack/environment.js
+Info for this file can be found
+github.com/rails/webpacker/blob/master/docs/webpack.md
+*/
+
+const { environment } = require('@rails/webpacker');
+const merge = require('webpack-merge');
+const webpack = require('webpack');
+
+// Add an additional plugin of your choosing : ProvidePlugin
+environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
+        $: 'jquery',
+        JQuery: 'jquery',
+        jquery: 'jquery',
+        'window.Tether': "tether",
+        Popper: ['popper.js', 'default'], // for Bootstrap 4
+    })
+);
+
+const envConfig = module.exports = environment;
+const aliasConfig = module.exports = {
+    resolve: {
+        alias: {
+            jquery: 'jquery/src/jquery'
+        }
+    }
+};
+
+module.exports = merge(envConfig.toWebpackConfig(), aliasConfig);

config/webpack/production.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+
+const environment = require('./environment');
+
+module.exports = environment;

config/webpack/test.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+const environment = require('./environment');
+
+module.exports = environment;

config/webpacker.yml

@@ -0,0 +1,70 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_output_path: packs
+  cache_path: tmp/cache/webpacker
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  resolved_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+  extensions:
+    - .js
+    - .sass
+    - .scss
+    - .css
+    - .module.sass
+    - .module.scss
+    - .module.css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+  compile: true
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    https: false
+    host: 0.0.0.0
+    port: 3035
+    public: 0.0.0.0:3035
+    hmr: false
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    compress: true
+    disable_host_check: true
+    use_local_ip: false
+    quiet: false
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    watch_options:
+      ignored: /node_modules/
+      # File Watcher might not work inside Vagrant
+      poll: true
+
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+production:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true