Deploying minified React and CSS bundles with Webpack for embed in external website

Question

I'm trying to deploy a Wordpress plugin (but could be anywhere really) that embeds a React component (think floating chatbot bubble).

I enqueue the scripts in PHP:

$js_bundle_url = 'https://www.example.com/static/webpack_bundles/main-bdb8c5b5cf9d1bf62j40.1e935af01431.js'
$css_bundle_url = 'https://www.example.com/static/webpack_bundles/main-bdb8c5b5cf9d1bf62j40.1e935af01431.css'
wp_enqueue_script('js-bundle', $js_bundle_url, array(), null, true);
wp_enqueue_style( 'css-bundle', $css_bundle_url, [], null, 'all' );

This is my Webpack config:

module.exports = (env, argv) => {
  const isDev = argv.mode === "development";
  const nodeModulesDir = path.resolve(__dirname, "node_modules");
  const localhostOutput = {
    path: path.resolve("./frontend/webpack_bundles/"),
    publicPath: "http://localhost:3000/frontend/webpack_bundles/",
    filename: "[name].js",
  };
  const productionOutput = {
    path: path.resolve("./frontend/webpack_bundles/"),
    publicPath: "auto",
    filename: "[name].js",
  };
  return {
    mode: isDev ? "development" : "production",
    devtool: "source-map",
    // ... skipped for brevity
    plugins: [
      !isDev &&
        new MiniCssExtractPlugin({ filename: "[name]-[chunkhash].css" }),
      isDev && new ReactRefreshWebpackPlugin(),
      new BundleTracker({
        path: __dirname,
        filename: "webpack-stats.json",
      }),
    ].filter(Boolean),
    // ...
   }
}

Each time I deploy the React (and Django) app on Render.com (by pushing to main, and having it autodeploy - but could be any cloud deployment), I have to change the URLs for these bundles, based on inspecting the code source and getting them there (I made a Wordpress plugin setting so atleast I can change it there), as they get recompiled (and renamed, I assume for caching reasons). For local development it works perfectly fine with the url for the js bundle not containing the hash, only 'main.js'.

Is there any way I could get these dynamically? So the Wordpress plugin updates automatically as soon as I deploy it on Render (or any other platform)? Could I have some kind of static url for these bundles that redirects to the chunkhash-named ones? Is there a better approach to this?

Previously I had it implemented via an iFrame - but this was not as good, as it did not integrate with the site well (no clicking through, dynamic placements in the DOM, ...).

Answer 1

There are a couple things you can do to help:

1. Remove the -[chunkhash] part of the file names so they always compile to the same name.
2. Output a manifest.json file with the Webpack plugin webpack-manifest-plugin and then parse it for the updated filenames to enqueue.