Gathering detailed insights and metrics for base-href-runtime-webpack-plugin
Gathering detailed insights and metrics for base-href-runtime-webpack-plugin
Webpack plugin for inserting <script> to setup base href tag
1.1.0
1
MIT
JavaScript
11.64 kB
Installations
npm install base-href-runtime-webpack-pluginDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.13.2
NPM Version
8.1.2
Releases
Unable to fetch releases
Languages
2
JavaScript
EJS
JavaScript (85.78%)
EJS (14.22%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
1 Stars
27 Commits
1 Forks
1 Watchers
3 Branches
2 Contributors
Updated on Sep 17, 2024
Maintainers
1
Package Meta Information
Latest Version
1.1.0
Package Id
base-href-runtime-webpack-plugin@1.1.0
Unpacked Size
11.64 kB
Size
4.93 kB
File Count
11
NPM Version
8.1.2
Node Version
16.13.2
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
2
Dev Dependencies
3
base-href-runtime-webpack-plugin
Extension for html-webpack-plugin to programmatically insert or update <base href="..."> tag in runtime depending on window.location.pathname.
It inserts inline <script> in your index.html output which generates (rewrites) <base href="...">
Why
When your application is proxied with many different domains and prefixes you might need to detect publicPath so you could resolve requests for assets correctly.
Example
Your application is hosted on example.com and you have 2 known entrypoints (proxies) for this application:
app.test.com/ui/app -> example.com
app2.io/ui/test/entrypoint -> example.com
So you want to open app.test.com/ui/app and resolve index.js request to app.test.com/ui/app/index.js (-> example.com/index.js)
For this purpose you want to generate different <base> tag:
1<!-- for app.test.com/ui/app/ (/ui/app/) --> 2<base href="/ui/app/"> 3<script src="index.js" /> <!-- /ui/app/index.js --> 4 5<!-- for app2.io/ui/test/entrypoint (/ui/test/entrypoint/) --> 6<base href="/ui/test/entrypoint/"> 7<script src="index.js" /> <!-- /ui/test/entrypoint/index.js -->
Thus <base> tag for the same index.html has to be generated in runtime.
Installation
For webpack v5 use latest (^1.1.0):
npm i --save-dev base-href-runtime-webpack-plugin
Usage
Prepare HtmlWebpackPlugin, it should generate relative paths for assets.
1new HtmlWebpackPlugin({ 2 template: 'public/index.html', 3 filename: 'index.html', 4 // ..., 5- publicPath: '/', 6+ publicPath: 'auto', // assets paths must be relative 7+ base: '/' // same as fallbackBaseHref, see https://github.com/jantimon/html-webpack-plugin#base-tag 8}),
Init base-href-runtime-webpack-plugin:
1const BaseHrefRuntimeWebpackPlugin = require('base-href-runtime-webpack-plugin'); 2 3plugins: [ 4 // ..., 5 new BaseHrefRuntimeWebpackPlugin({ 6 fallbackBaseHref: '/', // in case when we didn't match location.pathname 7 publicPaths: [ // availabled prefixes. Order is important! 8 '/ui/app/', // <base href="/ui/app/"> 9 '/ui/test/entrypoint/', // <base href="/ui/test/entrypoint/"> 10 '/a/b/c/d/e/', // <base href="/a/b/c/d/e/"> 11 ], 12 }), 13]
It will inject <script></script> in your index.html. This script compares current window.location.pathname and provided publicPaths. Then it updates <base href="..."> if we have a match. Otherwise it sets fallbackBaseHref value in your <base href="...">
Plugin leaves your template untouched if fallbackBaseHref and publicPaths options are not provided.
Setup application router (optional)
You might want to use publicPaths to prepare your application router (react-router, vue-router, etc.)
Example with react-router
1import * as React from 'react'; 2import * as ReactDOM from 'react-dom'; 3import { BrowserRouter as Router } from 'react-router-dom'; 4import { publicPaths, fallbackBaseHref } from './lib/constants/config'; // use same variable as publicPaths in you webpack.config.js 5 6const App = ({ basename }) => { 7 <Router basename={basename}> 8 {/* ... your app content ... */} 9 </Router> 10} 11 12const getBasename = (pathname) => { 13 const publicPath = publicPaths.find(publicPath => pathname.includes(publicPath.replace(/\/$/, ''))); 14 return publicPath || fallbackBaseHref; 15} 16 17ReactDOM.render(<App basename={getBasename(window.location.pathname)} />, document.getElementById('#app'));
Caveats
Excessive requests (duplicated requests)
https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work#preload_scanner
The preload scanner will parse through the content available and request high priority resources like CSS, JavaScript, and web fonts. <...> It will retrieve resources in the background so that by the time the main HTML parser reaches requested assets, they may possibly already be in flight, or have been downloaded.
It means that a browser requests all page's resources before you execute any <script>. So if your <base href="..."> tag is being changed by the <script> then your browser will repeat these requests again.
Example:
1<html> 2<head> 3 <base href="/unknown/"> 4 <script type="text/javascript"> 5 console.log('Initial document.baseURI:', document.baseURI); 6 document.querySelector('base').href = '/' 7 console.log('New document.baseURI:', document.baseURI); 8 </script> 9 <script src="js/index.js"></script> 10 11 <!-- @NOTE: I don't know why, but Chrome won't request script below again even after baseURI change --> 12 <!-- <script src="js/index.js" />--> 13 <!-- So <script src="..." /> and <script src="..."></script> have different behaviour (WTF?!) --> 14</head> 15</html>
Chrome's Network tab result (js/index.js request duplicated):
Supported browsers
All modern browsers, even IE7
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base#browser_compatibility
References
https://www.npmjs.com/package/base-href-webpack-plugin
https://github.com/jantimon/html-webpack-plugin#base-tag
Contribution
Feel free to contribute to this project by submitting issues and/or pull requests.
License
MIT
No vulnerabilities found.
No security vulnerabilities found.