fetch-write-webpack-plugin

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

Install

npm i -D fetch-write-webpack-plugin

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

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

The plugin's signature

webpack.config.js

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

Fetch Options

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`

Output Options

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.

anzai9 / fetch-write-webpack-plugin