What is the best way to use webpacker in a Rails engine?

Question

I realise there is some debate about using webpacker in Rails engines but I have a simple usecase and currently have a workaround. Would like to know of a better (the best?) solution.

In this rails engine I have webpacker setup in the "spec/dummy" directory and everything works well in dev: https://github.com/RealEstateWebTools/property_web_scraper/tree/master/spec/dummy/config/webpack

When the engine is used by a rails app however it will not find the compiled webpack files so each time I have a release ready I compile the webpack files and manually copy them to the vendor directory: https://github.com/RealEstateWebTools/property_web_scraper/tree/master/vendor/assets/javascripts

I then require that file here: https://github.com/RealEstateWebTools/property_web_scraper/blob/master/app/assets/javascripts/property_web_scraper/spp_vuetify.js

In my layout I use the above file using the good old sprockets "javascript_include_tag": https://github.com/RealEstateWebTools/property_web_scraper/blob/master/app/views/layouts/property_web_scraper/spp_vuetify.html.erb

In the layout there is a check to see if I'm running the "spec/dummy" app in which case I will user webpacker as it would normally be used in dev.

There must be a better way than this.

Answer 1

Webpacker has been retired

https://github.com/rails/webpacker

Going forward, it's better to switch to jsbundling-rails with webpack.

(I would rather suggest esbuild as it's "10×-100× faster")

But let's do it with webpack:

rails new webpack-in-engine --javascript webpack --css tailwind --database postgresql

In app/javascript/application.js I do:

console.log("hello from application.js")                                                                    

And it works.

Now with an engine:

rails plugin new admin --mountable

Then depends:

Separate JS

Add an entry to your webpack.config.js:

const path    = require("path")
const webpack = require("webpack")

module.exports = {
  mode: "production",
  devtool: "source-map",
  entry: {
    application: "./app/javascript/application.js",
    admin: "./admin/app/javascript/admin.js"
  },
  output: {
    filename: "[name].js",
    sourceMapFilename: "[name].js.map",
    path: path.resolve(__dirname, "app/assets/builds"),
  },
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })
  ]
}

    <%= javascript_include_tag "admin", "data-turbo-track": "reload", defer: true %>

Shared JS

    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

And in your app/javascript/application.js:

import "./../../admin/app/javascript/admin"

See full repo https://github.com/dorianmariefr/webpack-in-engine

Aside: Also I would rather namespace in the main app than have engines. I think engines are for very specific use cases not namespacing.