_external_asset_pipeline.md

This gist has evolved into a gem

Check out the gem's repository: https://github.com/rails-front-end/external_asset_pipeline

assets.rb

# config/initializers/assets.rb

module ExternalAssetPipeline
  class AssetNotFound < StandardError; end

  mattr_accessor :manifest

  class Manifest
    def find(name)
      data[name.to_s].presence
    end

    private

    def data
      if Rails.application.config.cache_revisioned_asset_manifest
        @data ||= load
      else
        load
      end
    end

    def load
      manifest_file_path = Rails.root.join('public', 'packs', '.revisioned-asset-manifest.json')
      JSON.parse(manifest_file_path.read)
    end
  end

  # Overrides the built-in `ActionView::Helpers::AssetUrlHelper#compute_asset_path` to use the
  # external asset pipeline, in the same manner that sprockets-rails does:
  # https://github.com/rails/sprockets-rails/blob/v3.2.1/lib/sprockets/rails/helper.rb#L74-L96
  def compute_asset_path(source, _options = {})
    value_in_asset_manifest = ExternalAssetPipeline.manifest.find(source)

    return "/packs/#{value_in_asset_manifest}" if value_in_asset_manifest

    raise AssetNotFound,
          "The asset #{source.inspect} is not present in the asset manifest"
  end
end

ExternalAssetPipeline.manifest = ExternalAssetPipeline::Manifest.new

ActionView::Base.include ExternalAssetPipeline

webpack.config.js

const glob = require('glob');
const path = require('path');
const util = require('util');
const WebpackAssetsManifest = require('webpack-assets-manifest');

const entryDir = 'packs';
const sourceRoot = path.resolve(__dirname, './app/javascript');
const entryRoot = path.resolve(sourceRoot, entryDir);
const targetRoot = path.resolve(__dirname, `./public/${entryDir}`);

const extensions = ['js', 'jsx', 'ts', 'tsx'];
const mode = process.env.NODE_ENV || 'development';

const config = {
  context: entryRoot,
  entry: async () => {
    const globPromise = util.promisify(glob);
    const paths = await globPromise(`${entryRoot}/**/*.{${extensions.join(',')}}`);

    const entry = {};
    paths.forEach((p) => {
      const relativePath = path.relative(entryRoot, p);
      const parts = path.parse(relativePath);
      const chunkName = path.join(parts.dir, parts.name);
      entry[chunkName] = p;
    });

    return entry;
  },
  mode,
  module: {
    rules: [
      {
        include: [sourceRoot],
        test: /\.(t|j)sx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
          },
        },
      },
    ]
  },
  node: false,
  output: {
    filename: '[name]-[hash].js',
    path: targetRoot
  },
  plugins: [
    new WebpackAssetsManifest({
      merge: true,
      output: '.revisioned-asset-manifest.json',
    }),
  ],
  resolve: {
    extensions: extensions.map(e => `.${e}`)
  }
};

if (mode === 'development') {
  config.devtool = 'cheap-source-map';
}

module.exports = config;