From dc5ec324dce5c135cb5743b6e4531bb64285ca46 Mon Sep 17 00:00:00 2001 From: Stefan Norberg Date: Wed, 22 Sep 2021 11:55:42 +0200 Subject: [PATCH] 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 * 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 Co-authored-by: Joshua Chen --- packages/docusaurus/src/constants.ts | 4 ++++ packages/docusaurus/src/webpack/utils.ts | 5 +++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus/src/constants.ts b/packages/docusaurus/src/constants.ts index de122ce0e1..8d1bb8a2d5 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 c29441c4ca..fa3ec9ae94 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,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) =>