Using Webpacker to compile javascript assets

First Install Webpacker

Next add blacklight-frontend as a dependency by doing:

yarn add blacklight-frontend

Next add these lines to config/webpack/environment.js as per https://getbootstrap.com/docs/4.0/getting-started/webpack/ and https://github.com/rails/webpacker/blob/master/docs/webpack.md#plugins

const webpack = require('webpack')

environment.plugins.set(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default'],
  })
)

module.exports = environment

In your pack file (app/javascript/packs/application.js), require blacklight:

require('blacklight-frontend/app/assets/javascripts/blacklight/blacklight')

Then remove these requires from app/assets/javascripts/application.js:

//= require jquery
//= require popper
//= require twitter/typeahead
//= require bootstrap

Copy the base.html.erb template to the local app:

cp `bundle show blacklight`/app/views/layouts/blacklight/base.html.erb` app/views/blacklight_config

Then edit that file and replace:

<%= javascript_include_tag %>

with

<%= javascript_pack_tag 'application' %>