From 25e5ea7b51acc15046f10893d105d191ef1353f9 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 9 Nov 2021 15:10:47 +0000
Subject: [PATCH] Define chunkFilename with contenthash in lazy loaded assets
 (https://github.com/woocommerce/woocommerce-blocks/pull/5094)

* Define chunkFilename with contenthash

* Fix editor filename
---
 .../woocommerce-blocks/bin/webpack-configs.js | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/plugins/woocommerce-blocks/bin/webpack-configs.js b/plugins/woocommerce-blocks/bin/webpack-configs.js
index 0f1472b0d96..224fcd7f3f9 100644
--- a/plugins/woocommerce-blocks/bin/webpack-configs.js
+++ b/plugins/woocommerce-blocks/bin/webpack-configs.js
@@ -171,12 +171,22 @@ const getMainConfig = ( options = {} ) => {
 		output: {
 			devtoolNamespace: 'wc',
 			path: path.resolve( __dirname, '../build/' ),
+			// This is a cache busting mechanism which ensures that the script is loaded via the browser with a ?ver=hash
+			// string. The hash is based on the built file contents.
+			// @see https://github.com/webpack/webpack/issues/2329
+			// Using the ?ver string is needed here so the filename does not change between builds. The WordPress
+			// i18n system relies on the hash of the filename, so changing that frequently would result in broken
+			// translations which we must avoid.
+			// @see https://github.com/Automattic/jetpack/pull/20926
+			chunkFilename: `[name]${ fileSuffix }.js?ver=[contenthash]`,
 			filename: `[name]${ fileSuffix }.js`,
 			library: [ 'wc', 'blocks', '[name]' ],
 			libraryTarget: 'this',
 			// This fixes an issue with multiple webpack projects using chunking
 			// overwriting each other's chunk loader function.
 			// See https://webpack.js.org/configuration/output/#outputjsonpfunction
+			// This can be removed when moving to webpack 5:
+			// https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-unique-naming
 			jsonpFunction: 'webpackWcBlocksJsonp',
 		},
 		module: {
@@ -280,10 +290,20 @@ const getFrontConfig = ( options = {} ) => {
 		output: {
 			devtoolNamespace: 'wc',
 			path: path.resolve( __dirname, '../build/' ),
+			// This is a cache busting mechanism which ensures that the script is loaded via the browser with a ?ver=hash
+			// string. The hash is based on the built file contents.
+			// @see https://github.com/webpack/webpack/issues/2329
+			// Using the ?ver string is needed here so the filename does not change between builds. The WordPress
+			// i18n system relies on the hash of the filename, so changing that frequently would result in broken
+			// translations which we must avoid.
+			// @see https://github.com/Automattic/jetpack/pull/20926
+			chunkFilename: `[name]-frontend${ fileSuffix }.js?ver=[contenthash]`,
 			filename: `[name]-frontend${ fileSuffix }.js`,
 			// This fixes an issue with multiple webpack projects using chunking
 			// overwriting each other's chunk loader function.
 			// See https://webpack.js.org/configuration/output/#outputjsonpfunction
+			// This can be removed when moving to webpack 5:
+			// https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-unique-naming
 			jsonpFunction: 'webpackWcBlocksJsonp',
 		},
 		module: {