Deploying minified React and CSS bundles with Webpack for embed in external website
Deploying minified React and CSS bundles with Webpack for embed in external website
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, ...).
There are a couple things you can do to help:
Remove the -[chunkhash] part of the file names so they always compile to the same name.
Output a manifest.json file with the Webpack plugin webpack-manifest-plugin and then parse it for the updated filenames to enqueue.
February 13, 2024
Turbo Multi-language Translator
Make the better internet purchasing globaly
Turbosify SEO Speed Booster
5.0 (7)•Free plan available
Get better conversions by improving store loading speed
Installed
Turbo Multi-language Chat - AI Customer service in one hand
February 13, 2024