Webpacker

init

Change folder name from app/javascript to app/webpack

# config/webpack/webpacker.yml
# change source_path from app/javascript to app/webpack
source_path: app/webpack

Make folder named stylesheets and add application.scss into the folder
We have also included core-js to polyfill features in the older browsers, so include this at the top of the file

// add below in app/webpack/packs/application.js
import "core-js/stable";
import "regenerator-runtime/runtime";
...
import '../stylesheets/application'

replace stylesheet_link_tag with stylesheet_pack_tag or just add stylesheet_pack_tag

# app/views/layouts/application.html.erb
  <%= stylesheet_pack_tag 'application' %>

Webpack will use javascript to load the CSS and update your page, however in production webpack will extract that CSS on its own file(application-1016838bab065ae1e122.css) which will be made by webpack, and for that you need to add a stylesheet_pack_tag.

# In development mode with hot module replacement:
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %> # =>
nil

# In production mode:
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %> # =>
<link rel="stylesheet" media="screen" href="/packs/application-1016838bab065ae1e122.css" data-turbolinks-track="reload" />

webpacker dev server

Whenever you refresh a page in your browser, Rails will compile your javascript right in that moment and you will wait for (what it seems to be) an endless time…, so you do not need to wait for compiling by execute webpack-dev-server

# open another terminal
$ WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpack-dev-server

warning Integrity check: System parameters don't match

When below error happen

$ rails c
warning Integrity check: System parameters don't match                                                                                                                  
error Integrity check failed                                                                                                                                            
error Found 1 errors.                                                                                                                                                   


========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================


To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).


yarn check v1.17.3
info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.

just do $ spring stop

asset

https://github.com/rails/webpacker/blob/master/docs/assets.md

// app/javascript/packs/app.js (or any of your packs)
// import all image files in a folder:
require.context('../images', true)

#app/javascript/images/example.png
<%= link_to asset_pack_url('media/images/ackama.png'), download: "ackama.png" do %>
  <%= image_pack_tag "ackama.png", alt: "Example Image" %>
<% end %>

add jquery to webpacker

$ yarn add jquery

// environment.js
// Add an ProvidePlugin
environment.plugins.prepend("Provide",
  new webpack.ProvidePlugin({
    $: "jquery/src/jquery",
    jQuery: "jquery/src/jquery",
    jquery: "jquery/src/jquery"
  })
);


// I do not know why this need. if this is not added, need import $ from 'jquery'; for $(document).foundation();
const config = environment.toWebpackConfig();
config.resolve.alias = {
  jquery: "jquery/src/jquery"
};

//application.js
require('jquery')

add jquery-ui to webpacker

$ yarn add webpack-jquery-ui

//application.js
require('webpack-jquery-ui');
require('webpack-jquery-ui/css');

Add foundation to webpacker

install

$  yarn add foundation-sites motion-ui

init

$ mkdir ./app/webpack/foundation
# copy _settings.scss and app.scss from https://github.com/foundation/foundation-zurb-template into ./app/webpack/foundation/_settings.scss and foundation.scss

replace @import 'foundation'; @import 'motion-ui'; in founddation.scss and
@import 'util/util'in _settings.scss

this tilde~ is to tell that the file we are importing is under node_modules and it’s used only in css/scss file.

in app/webpack/foundation/founddation.scss
// @import 'foundation'; 
// @import 'motion-ui';
@import '~foundation-sites/scss/foundation';
@import '~motion-ui/src/motion-ui';

// in app/webpack/foundation/_settings.scss
// @import 'util/util';
@import '~foundation-sites/scss/util/util';

Modify application.js and Make index.js

// in app/webpack/packs/application.js
import "foundation";

 
// app/webpack/foundation/index.js
import $ from 'jquery';
import './foundation.scss'
import 'foundation-sites'

$(document).ready(function () {
 $(document).foundation();
})

Refer

https://github.com/andyyou/rails-webpacker-foundation/blob/master/README.md

Add bootstrap to webpacker

install

$ yarn add bootstrap jquery popper.js

init

 # add below in views/layout/application.html.erb
 <%= stylesheet_pack_tag 'application', media: 'all' %>

// config/webpack/environment.js

const webpack = require("webpack");
// Add an ProvidePlugin
environment.plugins.prepend("Provide",
  new webpack.ProvidePlugin({
    $: "jquery/src/jquery",
    jQuery: "jquery/src/jquery",
    jquery: "jquery/src/jquery",
    Popper: ['popper.js', 'default']
  })
);

Make app/javascript/stylesheets/application.scss folder

// app/javascript/stylesheets/application.scss
// sass variable overrides
$body-bg: aliceblue;
$body-color: #111;
@import "~bootstrap/scss/bootstrap.scss";

//Add below in app/javascript/application.js

import '../stylesheets/application'

import 'jquery'
import 'popper.js'
import 'bootstrap'

refer

https://medium.com/@technoblogueur/rails-6-and-webpacker-what-you-need-to-know-e3534fded7ff