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.