fetch-write-webpack-plugin

Webpack plugin that would fetch the data source and write the file on build time 🚀

Install

``sh
npm i -D fetch-write-webpack-plugin
`

`sh
yarn add --dev fetch-write-webpack-plugin
`

This is a webpack plugin that could fetch the data on the other server and generate the corresponding files that you want bundle at the build time.

Usage

The plugin support fetch multiple data sources and build them each other before the compile.

webpack.config.js

`javascript
const FetchWritePlugin = require('fetch-write-webpack-plugin')

module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new FetchWritePlugin([
{
fetchOpts: {
url: 'http://localhost:4080/get/style',
retryOn: true,
headers: {
'Content-Type': 'application/json'
}
},
output: {
name: 'style.json',
basePath: './static/bundle'
}
},
{
fetchOpts: {
url: 'http://localhost:4080/get/name',
retryOn: true,
headers: {
'Content-Type': 'application/json'
}
},
output: {
name: 'name',
ext: 'json'
}
}
])
]
}
`

This will fetch to the data from http://host/data/you/want and generate the file at ./static/name.json.

If you have multiple data sources and file you want to generate on run time, you could use an array to wrap all configure.

Want to know more detail. Ref

Options

$3

webpack.config.js

`javasript
module.exports = {
plugins: [new CopyPlugin([{fetchOpts, output}, ...])]
}
`

$3

| Name | Type | Default | Description | |
| ---------- | --------- | ----------- | -------------------------------------------------- | --- |
| url | string | undefined | data source's url | |
| method | string | GET | fetch method | |
| headers | any | undefined | http headers | |
| body | any | undefined | http body | |
| retryOn | boolean | false | determine the retry fetch whether turn on or not | |
| retries | number | 3 | retry count only work while the retry on is true | |
| retryDelay | number | 1000 | retry delay only work while the retry on is true | |

$3

| Name | Type | Default | Description |
| -------- | -------- | --------------------- | --------------------- |
| name | string | undefined | filename |
| ext | string | undefined | file extension |
| basePath | string | webapck output path | output file base path |

Roadmap

- [ ] Add cache data while the the webpack dev-server hot reload
- [ ] Add force write featrue after emit hook and also compatible for the clean-webpack-plugin
- [ ] Compatible the writing file feature on webpack-dev-middleware and webpack-dev-server` (TBD)
- [ ] Make example to the sandbox testing

Show your support

Give a ⭐️ if this project helped you!

📝 License

MIT licensed.