Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kuldeepkeshwar/dynamic-public-path
Webpack Plugin for dynamic public path
https://github.com/kuldeepkeshwar/dynamic-public-path
dynamic-public-path webpack webpack-public-path
Last synced: about 2 months ago
JSON representation
Webpack Plugin for dynamic public path
- Host: GitHub
- URL: https://github.com/kuldeepkeshwar/dynamic-public-path
- Owner: kuldeepkeshwar
- License: mit
- Created: 2017-07-31T04:40:05.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-11-08T12:44:49.000Z (almost 5 years ago)
- Last Synced: 2024-07-31T11:03:17.229Z (about 2 months ago)
- Topics: dynamic-public-path, webpack, webpack-public-path
- Language: JavaScript
- Homepage:
- Size: 26.4 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# dynamic-public-path [](https://travis-ci.org/kuldeepkeshwar/dynamic-public-path)
this plugin is to allow webpack to use publicPath value that isn't known at build time.
This generate a boot file which allows you to load bundles from other projects built with webpack at runtime.
It is extremely helpful when you prepare a build for library with multiple entry points allowing you to load library chunks on demand.
or if you are trying to show views from multiple apps into a single app.
(instead of exposing child app as npm module & adding to your app at build time, you can use them directly at runtime)
For now it works with options `library` & `libraryTarget` as 'umd'
## install
```
npm install dynamic-public-path
```
## example
let say we want to publish `MyLibrary` which expose 2 bundles `a.js` & `b.js`
#### a.js
```
export default {value:10}
```
#### b.js
```
export default {value:20}
```
#### library.webpack.config.js
```
const DynamicPublicPathPlugin = require('dynamic-public-path');
const config = {
entry: {
a: ['a.js'],
b: ['b.js']
},
output: {
path: __dirname + '/lib',
filename: '[name].js',
chunkFilename: '[id].[chunkhash].js',
library: ['ab', '[name]'],
libraryTarget: 'umd'
},
plugins:[
new DynamicPublicPathPlugin({
outputPath: './lib',
bootfilename:'my-library.js'
global: 'MyLibrary', // gobal variable to access library
publicPath: 'window.publicPath'
})
]
}
```
above build will create `my-library.js` under the `lib` folder
Add `my-library.js` into other project via script tag
#### index.html
```
React App
Loading...
```
#### app.js
```
import MyLibrary from 'MyLibrary'
// set public path
window.publicPath= 'https://test-app/static/';
//or use configure function
/*
* MyLibrary.configure({publicPath:'https://test-app/static/'})
*/
MyLibrary.import('a').then((module)=>{
console.log(module) // {value :10}
})
MyLibrary.import('b').then((module)=>{
console.log(module) // {value :20}
})
```
# License
[](/LICENSE)