Webpacker Documentation

To serve precompressed Brotli files (.br) in Nginx, you must install the ngx_brotli module. Once installed, load the static module in your nginx.conf file:

load_module modules/ngx_http_brotli_static_module.so;

Then, enable it in your site configuration using brotli_static on; within the assets/packs location block.

To run a Webpacker app on Heroku, you must add both the Node.js and Ruby buildpacks. This ensures that npm or yarn executables are available to compile your assets during the deployment process.

Follow these steps:

1. Create your Heroku app.
2. Add your database (e.g., Heroku Postgres).
3. Add the heroku/nodejs buildpack.
4. Add the heroku/ruby buildpack.
5. Push your code to Heroku.

heroku create my-webpacker-heroku-app
heroku addons:create heroku-postgresql:hobby-dev
heroku buildpacks:add heroku/nodejs
heroku buildpacks:add heroku/ruby
git push heroku master

To debug your Webpack configuration, you can use the following methods:

1. Read error messages: They typically identify the precise key/value pair that does not match Webpack's expected schema.
2. Use a debugger: Insert a debugger statement in your Webpack configuration and run bin/webpacker --debug-webpacker. You can use the Chrome debugger by navigating to chrome://inspect or using the NiM extension.
3. Pass arguments to bin/webpacker: Any arguments passed to bin/webpacker are forwarded to Webpack. For example, use --debug to switch loaders to debug mode.
4. Debug webpack-dev-server: You can pass additional options to start the dev server with debugging enabled using bin/webpacker --debug-webpacker.

To prevent assets from recompiling on every deployment when files haven't changed, add public/packs and node_modules to your :linked_dirs in Capistrano.

If you add node_modules to :linked_dirs, you must ensure yarn install runs before deploy:assets:precompile by adding a custom task to your deploy.rb.

# In deploy.rb
append :linked_dirs, "log", "tmp/pids", "tmp/cache", "tmp/sockets", "public/packs", ".bundle", "node_modules"

before "deploy:assets:precompile", "deploy:yarn_install"

namespace :deploy do
  desc "Run rake yarn install"
  task :yarn_install do
    on roles(:web) do
      within release_path do
        execute("cd #{release_path} && yarn install --silent --no-progress --no-audit --no-optional")
      end
    end
  end
end

To silence Angular-related critical dependency warnings in Webpack, update your config/webpack/base.js to include a ContextReplacementPlugin.

const webpack = require('webpack')
const { resolve } = require('path')
const { webpackConfig, merge } = require('@rails/webpacker')

module.exports = merge(webpackConfig, {
  plugins: [
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(@angular|esm5)/,
      resolve(config.source_path)
    )
  ]
})

Instead of manually assigning dependencies to the window object (e.g., window.jQuery = jQuery), use Webpack's ProvidePlugin in config/webpack/base.js. This manages build-time dependencies to global symbols automatically.

// config/webpack/base.js

const webpack = require('webpack')
const { webpackConfig, merge } = require('@rails/webpacker')

module.exports = merge(webpackConfig, {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    })
  ],
})