From 5b4503ee58d8d15e88359edc0829f174c344c622 Mon Sep 17 00:00:00 2001 From: stnor Date: Tue, 7 Sep 2021 16:26:13 +0200 Subject: [PATCH 1/3] Make urlLoaderLimit in the webpack config user-overridable via environment variable 'URL_LOADER_LIMIT'. --- packages/docusaurus/src/webpack/utils.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus/src/webpack/utils.ts b/packages/docusaurus/src/webpack/utils.ts index 64123417e632..bddd9a1ab0df 100644 --- a/packages/docusaurus/src/webpack/utils.ts +++ b/packages/docusaurus/src/webpack/utils.ts @@ -326,8 +326,9 @@ 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 < 10kb (overridable via 'URL_LOADER_LIMIT' environment + // variable) will be inlined as base64 strings directly in the html + const urlLoaderLimit = process.env.URL_LOADER_LIMIT || 10000; // defines the path/pattern of the assets handled by webpack const fileLoaderFileName = (folder: AssetFolder) => From 6f98006e56090bcf44f242539e38d0fbae2a928a Mon Sep 17 00:00:00 2001 From: Stefan Norberg Date: Wed, 8 Sep 2021 09:54:55 +0200 Subject: [PATCH 2/3] Apply suggestions from code review Co-authored-by: Joshua Chen --- packages/docusaurus/src/webpack/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus/src/webpack/utils.ts b/packages/docusaurus/src/webpack/utils.ts index bddd9a1ab0df..88123ea239b9 100644 --- a/packages/docusaurus/src/webpack/utils.ts +++ b/packages/docusaurus/src/webpack/utils.ts @@ -328,7 +328,7 @@ type FileLoaderUtils = { export function getFileLoaderUtils(): FileLoaderUtils { // files/images < 10kb (overridable via 'URL_LOADER_LIMIT' environment // variable) will be inlined as base64 strings directly in the html - const urlLoaderLimit = process.env.URL_LOADER_LIMIT || 10000; + const urlLoaderLimit = process.env.URL_LOADER_LIMIT ?? 10000; // defines the path/pattern of the assets handled by webpack const fileLoaderFileName = (folder: AssetFolder) => From 26fead7729c644b52b666014f35c72747879f40d Mon Sep 17 00:00:00 2001 From: stnor Date: Tue, 21 Sep 2021 22:06:21 +0200 Subject: [PATCH 3/3] 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 --- packages/docusaurus/src/constants.ts | 4 ++++ packages/docusaurus/src/webpack/utils.ts | 6 +++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/docusaurus/src/constants.ts b/packages/docusaurus/src/constants.ts index de122ce0e1ef..8d1bb8a2d5cf 100644 --- a/packages/docusaurus/src/constants.ts +++ b/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; diff --git a/packages/docusaurus/src/webpack/utils.ts b/packages/docusaurus/src/webpack/utils.ts index 88123ea239b9..8c483ed94730 100644 --- a/packages/docusaurus/src/webpack/utils.ts +++ b/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,9 +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 (overridable via 'URL_LOADER_LIMIT' environment - // variable) will be inlined as base64 strings directly in the html - const urlLoaderLimit = process.env.URL_LOADER_LIMIT ?? 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) =>