feat: make Webpack url-loader limit configurable (env variable) (#5498)

* Make urlLoaderLimit in the webpack config user-overridable via environment variable 'URL_LOADER_LIMIT'.

* Apply suggestions from code review

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Changes as per @slorber's suggestions:
* moving it to packages/docusaurus/src/constants.ts
* name it WEBPACK_ URL_LOADER_LIMIT
* add comment to say it's temporary, link to this PR/issue

Co-authored-by: stnor <stefan@selessia.com>
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

Author: stnor

packages/docusaurus/src/constants.ts

@@ -32,3 +32,7 @@ export const OUTPUT_STATIC_ASSETS_DIR_NAME = 'assets'; // files handled by webpa
 export const THEME_PATH = `${SRC_DIR_NAME}/theme`;
 export const DEFAULT_PORT = 3000;
 export const DEFAULT_PLUGIN_ID = 'default';
+
+// Temporary fix for https://github.com/facebook/docusaurus/issues/5493
+export const WEBPACK_URL_LOADER_LIMIT =
+  process.env.WEBPACK_URL_LOADER_LIMIT ?? 10000;

packages/docusaurus/src/webpack/utils.ts

@@ -33,6 +33,7 @@ import {
 import {
   BABEL_CONFIG_FILE_NAME,
   OUTPUT_STATIC_ASSETS_DIR_NAME,
+  WEBPACK_URL_LOADER_LIMIT,
 } from '../constants';
 import {memoize} from 'lodash';
 
@@ -326,8 +327,8 @@ type FileLoaderUtils = {
 
 // Inspired by https://github.com/gatsbyjs/gatsby/blob/8e6e021014da310b9cc7d02e58c9b3efe938c665/packages/gatsby/src/utils/webpack-utils.ts#L447
 export function getFileLoaderUtils(): FileLoaderUtils {
-  // files/images < 10kb will be inlined as base64 strings directly in the html
-  const urlLoaderLimit = 10000;
+  // files/images < urlLoaderLimit will be inlined as base64 strings directly in the html
+  const urlLoaderLimit = WEBPACK_URL_LOADER_LIMIT;
 
   // defines the path/pattern of the assets handled by webpack
   const fileLoaderFileName = (folder: AssetFolder) =>