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>
This commit is contained in:
Stefan Norberg 2021-09-22 11:55:42 +02:00 committed by GitHub
parent 57c7a302fa
commit dc5ec324dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 2 deletions

View file

@ -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;

View file

@ -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) =>