@@ -490,7 +490,8 @@ See [boilerplate](https://github.com/webdiscus/webpack-html-scss-boilerplate)
490490<a id =" toc-loader-options " name =" toc-loader-options " ></a >
4914911 . [ Loader options] ( #loader-options )
492492 - [ sources] ( #loader-option-sources ) (processing of custom tag attributes)
493- - [ root] ( #loader-option-root ) (allow to resolve root path in attributes)
493+ - [ root] ( #loader-option-root ) (allow to resolve a path with leading ` / ` )
494+ - [ context] ( #loader-option-context ) (allow to resolve a path w/o leading ` / ` )
494495 - [ beforePreprocessor] ( #loader-option-before-preprocessor ) (callback)
495496 - [ preprocessor] ( #loader-option-preprocessor ) (callback or string) and [ preprocessorOptions] ( #loader-option-preprocessorOptions ) (templating)
496497 - [ eta] ( #loader-option-preprocessor-options-eta )
@@ -3108,7 +3109,7 @@ Type: `string|boolean` Default: `false`
31083109
31093110The ` root` option allow to resolve an asset file with leading ` / ` root path.
31103111
3111- Defaults is disabled because the file with leading ` / ` is a valide URL in the public path, e.g. ` dist/ ` .
3112+ Defaults is disabled because the file with leading ` / ` is a valid URL in the public path, e.g. ` dist/ ` .
31123113The files with leading ` / ` are not processed.
31133114
31143115Define the ` root` option as the absolute path to the source directory to enable the processing.
@@ -3152,6 +3153,55 @@ Now you can use the `/` root path for the source assets:
31523153
31533154#### [↑ back to contents](#contents)
31543155
3156+ <a id="loader-option-context" name="loader-option-context"></a>
3157+
3158+ ### ` context`
3159+
3160+ Type: ` string` Default: ` undefined `
3161+
3162+ The ` context` option allow to resolve an asset file without leading ` / ` path.
3163+
3164+ For example, there are project files:
3165+
3166+ ` ` `
3167+ project/ src/ views/ index .html
3168+ project/ src/ styles/ style .scss
3169+ project/ src/ images/ logo .png
3170+ otherDir/ stock- photos/ cologne .png // <= file outer your project directory
3171+ ` ` `
3172+
3173+ You can use the [root](loader-option-root) option to use assets in your project directory
3174+ and define the ` context` option to use assets outer your project directory:
3175+
3176+ ` ` ` js
3177+ new HtmlBundlerPlugin ({
3178+ entry: {
3179+ index: ' src/views/index.html' ,
3180+ },
3181+ loaderOptions: {
3182+ root: path .resolve (__dirname , ' src' ),
3183+ context: path .resolve (__dirname , ' ../otherDir' ),
3184+ },
3185+ });
3186+ ` ` `
3187+
3188+ Now you can use the leading ` / ` for the assets in your project and w/o ` / ` for assets from outer directory:
3189+
3190+ ` ` ` html
3191+ < html>
3192+ < head>
3193+ < link href= " /styles/style.scss" rel= " stylesheet" / >
3194+ < / head>
3195+ < body>
3196+ < h1> Hello World! < / h1>
3197+ < img src= " /images/logo.png" / >
3198+ < img src= " stock-photos/cologne.png" / >
3199+ < / body>
3200+ < / html>
3201+ ` ` `
3202+
3203+ #### [↑ back to contents](#contents)
3204+
31553205<a id="loader-option-before-preprocessor" name="loader-option-before-preprocessor"></a>
31563206
31573207### ` beforePreprocessor`
0 commit comments