【Ruby on Rails】WebpackerでBootstrap、jQueryを導入方法

Webpackerのインストール

Gemfile

gem "webpacker"

bundle install

rails webpacker:install

Bootstrapの導入

yarn add bootstrap@4.3.1 jquery popper.js

webpacker/environment.js

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/application.js

import "bootstrap"
import "../src/application.scss"

require("jquery")

app/javascript/src/application.scss

@import "~bootstrap/scss/bootstrap";

app/views/layouts/application.html.slim

html
  head
    == javascript_pack_tag "application"
    == stylesheet_pack_tag "application"

Webpacker導入後、data-remoteやdata-confirmが動かなくなった場合

yarn add rails-ujs

app/javascript/packs/application.js

import Rails from "rails-ujs";
Rails.start();

Webpacker導入後、*.js.erbファイルが動かなくなった場合

app/javascript/packs/application.js

import $ from "jquery";
global.$ = jQuery;