Documentation Index
Fetch the complete documentation index at: https://docs.webpack.js.org/llms.txt
Use this file to discover all available pages before exploring further.
Webpack provides several special variables that can be used in your modules for runtime configuration, metadata access, and module information.
webpack_public_path
Configures the public path for webpack assets at runtime.
Type
__webpack_public_path__: string
Description
Controls the base path for all assets (chunks, images, fonts) emitted by webpack. Can be set dynamically at runtime before importing modules.
Usage Examples
Basic Assignment
// Set before importing any modules
__webpack_public_path__ = '/assets/';
// Now all assets will be loaded from /assets/
import('./module.js');
CDN Configuration
// Load assets from CDN
__webpack_public_path__ = 'https://cdn.example.com/assets/';
// Dynamic CDN selection
if (process.env.NODE_ENV === 'production') {
__webpack_public_path__ = 'https://cdn.example.com/';
} else {
__webpack_public_path__ = '/dev-assets/';
}
Runtime Detection
// Determine public path from script tag
const scriptSrc = document.currentScript?.src;
if (scriptSrc) {
__webpack_public_path__ = scriptSrc.substring(0, scriptSrc.lastIndexOf('/') + 1);
}
Relative to Current Origin
// Use current origin + path
__webpack_public_path__ = window.location.origin + '/static/';
Set __webpack_public_path__ in your entry point before importing any other modules. Changes after modules are loaded won’t affect already-loaded assets.
webpack_base_uri
Sets the base URI for WebAssembly and Worker module resolution.
Type
__webpack_base_uri__: string
Description
Controls the base URI used for resolving WebAssembly modules and Web Workers. Defaults to document.baseURI.
Usage Examples
// Set custom base URI
__webpack_base_uri__ = 'https://wasm.example.com/';
// Load WASM module
import('./fibonacci.wasm');
webpack_modules
Access to webpack’s internal module registry.
Type
__webpack_modules__: Record<string | number, Module>
Description
Provides access to all loaded modules. Each module is a function that executes the module code.
Usage Examples
// Access module registry
console.log(__webpack_modules__);
// Check if module is loaded
const moduleId = 42;
if (__webpack_modules__[moduleId]) {
console.log('Module loaded');
}
// Iterate over all modules
Object.keys(__webpack_modules__).forEach(id => {
console.log(`Module ${id} is available`);
});
Direct manipulation of __webpack_modules__ is not recommended. This API is primarily for debugging and advanced use cases.
webpack_chunk_load
Function to load chunks programmatically.
Type
__webpack_chunk_load__(chunkId: string | number): Promise<void>
Description
Manually load a specific chunk. Returns a Promise that resolves when the chunk is loaded.
Usage Examples
// Preload a chunk
await __webpack_chunk_load__('vendors');
// Load multiple chunks
await Promise.all([
__webpack_chunk_load__('chunk-1'),
__webpack_chunk_load__('chunk-2'),
__webpack_chunk_load__('chunk-3')
]);
webpack_module.id
The module ID of the current module.
Type
__webpack_module__.id: string | number
Description
Provides the unique identifier for the current module.
Usage Examples
// Log current module ID
console.log('Current module ID:', __webpack_module__.id);
// Use in module registry
const currentModule = __webpack_modules__[__webpack_module__.id];
webpack_hash
The compilation hash at runtime.
Type
Description
Provides the hash of the current compilation. Useful for cache busting and version tracking.
Usage Examples
// Display build version
console.log('Build hash:', __webpack_hash__);
// Cache key
const cacheKey = `app-cache-${__webpack_hash__}`;
localStorage.setItem(cacheKey, data);
// API versioning
fetch(`/api/data?v=${__webpack_hash__}`);
__webpack_hash__ remains constant for a given build. It changes only when you rebuild with webpack.
webpack_chunkname
The name of the current chunk.
Type
__webpack_chunkname__: string
Description
Provides the name of the chunk containing the current module.
Usage Examples
// Log chunk name
console.log('Running in chunk:', __webpack_chunkname__);
// Conditional logic based on chunk
if (__webpack_chunkname__ === 'main') {
initializeApp();
}
webpack_get_script_filename
Function to get the filename for a chunk ID.
Type
__webpack_get_script_filename__(chunkId: string | number): string
Description
Returns the filename that would be used for a given chunk ID.
Usage Examples
// Get chunk filename
const filename = __webpack_get_script_filename__('vendors');
console.log(filename); // 'vendors.1234abcd.js'
// Preload hint
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'script';
link.href = __webpack_get_script_filename__('critical-feature');
document.head.appendChild(link);
webpack_nonce
Sets the nonce for script tags (Content Security Policy).
Type
__webpack_nonce__: string
Description
Configures the nonce attribute for all script and style tags created by webpack. Used for Content Security Policy.
Usage Examples
// Set nonce before loading modules
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
// All dynamically created scripts will include this nonce
import('./module.js');
// Creates: <script nonce="c29tZS..." src="module.js"></script>
Server-Side Integration
// Express middleware
app.use((req, res, next) => {
res.locals.cspNonce = crypto.randomBytes(16).toString('base64');
next();
});
// In HTML template
<script>
__webpack_nonce__ = '<%= cspNonce %>';
</script>
<script src="/main.js"></script>
webpack_runtime_id
The runtime ID for the current runtime.
Type
__webpack_runtime_id__: string
Description
Identifies the current runtime when using multiple runtimes.
Usage Examples
// Check runtime context
console.log('Runtime ID:', __webpack_runtime_id__);
if (__webpack_runtime_id__ === 'main-runtime') {
// Main runtime logic
} else {
// Secondary runtime logic
}
webpack_layer
The layer name of the current module.
Type
__webpack_layer__: string | null
Description
Provides the layer name when using webpack’s experimental layers feature.
Usage Examples
// Check current layer
if (__webpack_layer__ === 'client') {
// Client-side code
} else if (__webpack_layer__ === 'server') {
// Server-side code
}
webpack_share_scopes
Access to module federation share scopes.
Type
__webpack_share_scopes__: Record<string, ShareScope>
Description
Provides access to shared module scopes when using Module Federation.
Usage Examples
// Access shared dependencies
const defaultScope = __webpack_share_scopes__.default;
// Check if module is shared
if (__webpack_share_scopes__.default?.['react']) {
console.log('React is shared');
}
webpack_init_sharing
Initialize module federation sharing.
Type
__webpack_init_sharing__(scope: string): Promise<void>
Description
Initializes a share scope for Module Federation.
Usage Examples
// Initialize default share scope
await __webpack_init_sharing__('default');
// Now shared modules are available
const container = await import('remote/App');
non_webpack_require
Native Node.js require (bypasses webpack).
Type
__non_webpack_require__: NodeRequire
Description
Provides access to Node.js’s native require function, bypassing webpack’s module system. Only available in Node.js targets.
Usage Examples
// Load native Node.js module
const fs = __non_webpack_require__('fs');
// Load module from absolute path
const config = __non_webpack_require__('/etc/app/config.json');
// Dynamic native require
const moduleName = 'path';
const nativeModule = __non_webpack_require__(moduleName);
__non_webpack_require__ is only available when targeting Node.js environments. Using it in browser builds will cause errors.
system_context
SystemJS context object.
Type
__system_context__: System.Context
Description
Provides the SystemJS context when using SystemJS output format.
Usage Examples
// Access SystemJS context
console.log(__system_context__.import);
// Use SystemJS features
__system_context__.import('./module.js').then(module => {
console.log(module);
});
Common Patterns
Dynamic Public Path Configuration
// config.js
(function() {
// Detect environment
const isDev = process.env.NODE_ENV === 'development';
const isStaging = window.location.hostname.includes('staging');
// Set public path
if (isDev) {
__webpack_public_path__ = '/assets/';
} else if (isStaging) {
__webpack_public_path__ = 'https://staging-cdn.example.com/';
} else {
__webpack_public_path__ = 'https://cdn.example.com/';
}
// Log for debugging
console.log('Public path:', __webpack_public_path__);
})();
CSP Nonce Setup
// entry.js
// Extract nonce from meta tag
const metaNonce = document.querySelector('meta[property="csp-nonce"]');
if (metaNonce) {
__webpack_nonce__ = metaNonce.getAttribute('content');
}
// Now safe to load modules
import('./app.js');
Module Hot Reload with Hash
// Display version in footer
const versionEl = document.getElementById('version');
if (versionEl) {
versionEl.textContent = `v${__webpack_hash__}`;
}
// Clear old cache on new deploy
const CURRENT_CACHE = `app-v${__webpack_hash__}`;
const cacheNames = await caches.keys();
await Promise.all(
cacheNames
.filter(name => name !== CURRENT_CACHE)
.map(name => caches.delete(name))
);
TypeScript Declarations
Add these declarations to your TypeScript project:
// globals.d.ts
declare let __webpack_public_path__: string;
declare let __webpack_base_uri__: string;
declare const __webpack_modules__: Record<string | number, any>;
declare const __webpack_chunk_load__: (chunkId: string | number) => Promise<void>;
declare const __webpack_module__: { id: string | number };
declare const __webpack_hash__: string;
declare const __webpack_chunkname__: string;
declare const __webpack_get_script_filename__: (chunkId: string | number) => string;
declare let __webpack_nonce__: string;
declare const __webpack_runtime_id__: string;
declare const __webpack_layer__: string | null;
declare const __webpack_share_scopes__: Record<string, any>;
declare const __webpack_init_sharing__: (scope: string) => Promise<void>;
declare const __non_webpack_require__: NodeRequire;
declare const __system_context__: any;
See Also
