Use asset modules instead of file-loader

client/webpack.config.js

@@ -1,5 +1,5 @@
 /**
- * **** WARNING: No ES6 modules here. Not transpiled! ****
+ * WARNING: No ES6 modules here. Not transpiled! *
  */
 
 /* eslint-disable import/no-nodejs-modules */
@@ -140,19 +140,17 @@ const outputDir = path.resolve( '.' );
 const fileLoader = FileConfig.loader(
 	// The server bundler express middleware serves assets from a hard-coded publicPath.
 	// This is required so that running calypso via `yarn start` doesn't break.
+	// The final URL of the image is `${publichPath}${outputPath}/${fileName}` (note the slashes)
 	isDevelopment
 		? {
-				outputPath: 'images',
-				publicPath: `/calypso/${ extraPath }/images/`,
-				esModules: true,
+				publicPath: `/calypso/${ extraPath }/`,
+				outputPath: 'images/',
 		  }
 		: {
-				// File-loader does not understand absolute paths so __dirname won't work.
-				// Build off `output.path` for a result like `/…/public/evergreen/../images/`.
-				outputPath: path.join( '..', 'images' ),
+				// Build off `outputPath` for a result like `/…/public/evergreen/../images/`.
 				publicPath: '/calypso/images/',
+				outputPath: '../images/',
 				emitFile: browserslistEnv === defaultBrowserslistEnv, // Only output files once.
-				esModules: true,
 		  }
 );
 

client/webpack.config.node.js

@@ -1,5 +1,5 @@
 /**
- * **** WARNING: No ES6 modules here. Not transpiled! ****
+ * WARNING: No ES6 modules here. Not transpiled! *
  */
 
 /* eslint-disable import/no-nodejs-modules */
@@ -36,7 +36,9 @@ const shouldConcatenateModules = process.env.CONCATENATE_MODULES !== 'false';
 const cacheDirectory = path.resolve( '.cache', 'babel-server' );
 
 const fileLoader = FileConfig.loader( {
-	publicPath: isDevelopment ? `/calypso/${ devTarget }/images/` : '/calypso/images/',
+	// The final URL of the image is `${publicPath}${outputPath}/${fileName}` (note the slashes)
+	publicPath: isDevelopment ? `/calypso/${ devTarget }/` : '/calypso/',
+	outputPath: 'images/',
 	emitFile: false, // On the server side, don't actually copy files
 } );
 

packages/calypso-build/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## trunk
 
+- Breaking: Changed `webpack/file-loader` to internally use the new `asset/resource` modules (the former is deprecated in
+  webpack 5). The semantics of the options have changed, now the final asset URL is `${publichPath}${outputPath}/${fileName}`,
+  before it didn't include the `outputPath` part.
 - Switched from `node-sass` to `sass` (Dart Sass) for processing Sass files.
   - Removed dependency `node-sass`
   - Added dependency `sass ^1.32.13`

packages/calypso-build/package.json

@@ -59,7 +59,6 @@
 		"duplicate-package-checker-webpack-plugin": "^3.0.0",
 		"enzyme-adapter-react-16": "^1.15.1",
 		"enzyme-to-json": "^3.4.3",
-		"file-loader": "^4.3.0",
 		"jest-config": "^27.0.6",
 		"jest-emotion": "^10.0.27",
 		"jest-enzyme": "^7.1.2",

packages/calypso-build/webpack/file-loader.js

@@ -1,19 +1,26 @@
+const path = require( 'path' );
+
 /**
  * Return a Webpack loader configuration object for files / images.
  *
- * @param  {object} options File loader options
- * @returns {object}         Webpack loader object
+ * @param {object} options Rule.generator options
+ * @param options.outputPath Where to output the asset
+ * @param options.name Name of the asset
+ * @param options.publicPath Path used to generate the URL for the asset
+ * @param options.emitFile Whether to write the assets to the filesystem (defaults to true)
+ * @returns {object} Webpack loader object
  */
-module.exports.loader = ( options ) => ( {
+module.exports.loader = ( {
+	outputPath = 'images/',
+	name = '[name]-[hash][ext]',
+	publicPath = '/',
+	emitFile = true,
+} = {} ) => ( {
 	test: /\.(?:gif|jpg|jpeg|png|svg)$/i,
-	use: [
-		{
-			loader: require.resolve( 'file-loader' ),
-			options: {
-				name: '[name]-[hash].[ext]',
-				outputPath: 'images/',
-				...options,
-			},
-		},
-	],
+	type: 'asset/resource',
+	generator: {
+		filename: path.join( outputPath, name ),
+		publicPath,
+		emit: emitFile,
+	},
 } );

yarn.lock

@@ -13144,14 +13144,6 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
-file-loader@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-4.3.0.tgz#780f040f729b3d18019f20605f723e844b8a58af"
-  integrity sha512-aKrYPYjF1yG3oX0kWRrqrSMfgftm7oJW5M+m4owoldH5C51C0RkIwB++JbRvEW3IU6/ZG5n8UvEcdgwOt2UOWA==
-  dependencies:
-    loader-utils "^1.2.3"
-    schema-utils "^2.5.0"
-
 file-loader@^6.0.0, file-loader@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
@@ -25265,7 +25257,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0:
+schema-utils@^2.0.0, schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
   integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==