offline-bundler-plugin

This plugin helps compress static resources (such as js, css, png...) into a zip package, with a resource mapping json file in it.

Now supports both Webpack and Vite/UniApp!

Resource Mapping Json:

{
  "packageId": "meeting",
  "items": [
    {
      "packageId": "meeting",
      "version": 1,
      "remoteUrl": "http://192.168.88.88:5000/js/app.630f02ab.js",
      "path": "js/app.630f02ab.js",
      "mimeType": "application/javascript"
    },
    {
      "packageId": "meeting",
      "version": 1,
      "remoteUrl": "http://192.168.88.88:5000/js/chunk-vendors.dca9c05a.js",
      "path": "js/chunk-vendors.dca9c05a.js",
      "mimeType": "application/javascript"
    }
  ]
}

Installation

npm install offline-bundler-plugin -D

or

yarn add offline-bundler-plugin -D

Usage

For Webpack Projects

Via webpack.config.js or any other webpack config file.

const OfflinePackagePlugin = require('offline-bundler-plugin');

{
  plugins: [
    new OfflinePackagePlugin({
      packageNameKey: 'packageId',
      packageNameValue: 'meeting',
      version: 1,
      baseUrl: 'http://192.168.88.88:5000/',
      fileTypes: ['html', 'js', 'css', 'png']
    })
  ];
}

For Vite/UniApp Projects

Via vite.config.js or vite.config.ts.

import OfflinePackagePlugin from 'offline-bundler-plugin/vite';

export default {
  plugins: [
    OfflinePackagePlugin({
      packageNameKey: 'packageId',
      packageNameValue: 'meeting',
      version: 1,
      baseUrl: 'http://192.168.88.88:5000/',
      fileTypes: ['html', 'js', 'css', 'png']
    })
  ]
}

Note: For Vite, the plugin function returns a Vite plugin object, so don't use new keyword.

Options

options need to be an object.

packageNameKey

This option determines the key of package name in the resource mapping json.

Resource mapping json:

{
  "packageId": "meeting",
  "items": [
    ...
  ]
}

Default: 'packageName'

Config example:

{
  plugins: [
    new OfflinePackagePlugin({
      packageNameKey: 'packageId'
    })
  ];
}

packageNameValue

This option determines the value of package name in the resource mapping json.

Resource mapping json:

{
  "packageNameValue": "meeting",
  "items": [
    ...
  ]
}

Default: ''

Config example:

{
  plugins: [
    new OfflinePackagePlugin({
      packageNameValue: 'meeting'
    })
  ];
}

version

This option determines the value of version in the resource mapping json.

Resource mapping json:

{
  ...
  "version": 1
  "items": [
    ...
  ]
}

Default: 1

Config example:

{
  plugins: [
    new OfflinePackagePlugin({
      version: 2
    })
  ];
}

folderName

This option determines the name of the output zip file.

Default: 'package'

Config example:

{
  plugins: [
    new OfflinePackagePlugin({
      folderName: 'package'
    })
  ];
}

indexFileName

This option determines the name of the resource mapping json.

Default: 'index.json'

Config example:

{
  plugins: [
    new OfflinePackagePlugin({
      indexFileName: 'index.json'
    })
  ];
}

baseUrl

This option determines the base url of remoteUrl in the resource mapping json.

Resource mapping json:

{
  ...
  "items": [
    {
      "remoteUrl": `${baseUrl}/about.9d81a00f.js`,
      "path": "js/about.9d81a00f.js"
    }
  ]
}

Default: ''

Config example:

{
  plugins: [
    new OfflinePackagePlugin({
      indexFileName: 'index.json'
    })
  ];
}

fileTypes

This options provides control over if add a web resource file into zip file via file extension. The options need to be an array. And an empty array means there is no limit of file extension.

Default: []

Config example:

{
  plugins: [
    new OfflinePackagePlugin({
      fileTypes: ['html', 'js', 'css', 'png']
    })
  ];
}

excludeFileName

This options provides control over if add a web resource file into zip file via file name. The options need to be an array. And an empty array means there is no limit of file extension.

Default: []

Config example:

{
  plugins: [
    new OfflinePackagePlugin({
      excludeFileName: ['main.js']
    })
  ];
}

sourcePath

This option allows you to specify a custom source folder path (relative to the build output directory) to package. By default, it packages the entire output directory.

Note: This option is only available for Vite/UniApp projects.

Default: '' (packages the entire output directory)

Config example:

// For Vite projects
import OfflinePackagePlugin from 'offline-bundler-plugin/vite';

export default {
  plugins: [
    OfflinePackagePlugin({
      packageNameKey: 'packageId',
      packageNameValue: 'meeting',
      version: 1,
      baseUrl: 'http://192.168.88.88:5000/',
      sourcePath: 'h5', // Only package the 'h5' subfolder in the dist directory
      fileTypes: ['html', 'js', 'css', 'png']
    })
  ]
}