webpack-manifest-versioner

Replace file names in specified files with versioned names

Installing

Install webpack-manifest-versioner using npm or yarn:

1npm install webpack-manifest-versioner --save-dev

or

1yarn add -D webpack-manifest-versioner

Add the plugin to your webpack config file, for example:

webpack.config.js

1const ManifestVersionerPlugin = require('webpack-manifest-versioner');
2
3module.exports = {
4  plugins: [
5    new ManifestVersionerPlugin({
6      files: [
7        {
8          source: './src/site.webmanifest',
9          target: 'dest/[name].[contenthash:8][ext]'
10        }
11      ]
12    })
13  ]
14};

Options

• files
• defaultTarget

files

Type: array

1files: [
2  {
3    source: './src/site.webmanifest',
4    target: 'dest/[name].[contenthash:8][ext]'
5  }
6]

• source
• target

source

Type: string

The source file to read from.

target

Type: string

Optional (required if defaultTarget is not provided)

The destination for the output file relative to the webpack output directory. Supports webpack substitutions.

defaultTarget

Type: string

Optional

1defaultTarget: 'dest/[name].[contenthash:8][ext]'

The target pattern to use for any files without a target set.

Example

webpack.config.js

1const ManifestVersionerPlugin = require('webpack-manifest-versioner');
2
3module.exports = {
4  entry: {
5    // Your entry points
6  },
7  output: {
8    path: path.join(__dirname, 'build'),
9    filename: '[name].[hash].js',
10  },
11  plugins: [
12    new ManifestVersionerPlugin({
13      files: [
14        { source: './src/site.webmanifest' },
15        { source: '/src/browserconfig.xml' }
16      ],
17      defaultTarget: 'dest/[name].[contenthash:8][ext]'
18    })
19  ]
20};

site.webmanifest

1{
2  "name": "Sample site",
3  "icons": [
4    {
5      "src": "build/icons/android-chrome-192x192.png",
6      "sizes": "192x192",
7      "type": "image/png"
8    },
9    {
10      "src": "build/icons/android-chrome-512x512.png",
11      "sizes": "512x512",
12      "type": "image/png"
13    }
14  ]
15}

browserconfig.xml

1<?xml version="1.0" encoding="utf-8"?>
2<browserconfig>
3  <msapplication>
4    <tile>
5      <square150x150logo src="build/icons/mstile-150x150.png"/>
6    </tile>
7  </msapplication>
8</browserconfig>

Sample output

site.5f33ce81.sitemanifest

1{
2  "name": "Sample site",
3  "icons": [
4    {
5      "src": "/build/icons/android-chrome-192x192.3be48ecd.png",
6      "sizes": "192x192",
7      "type": "image/png"
8    },
9    {
10      "src": "/build/icons/android-chrome-512x512.aa63e8d0.png",
11      "sizes": "512x512",
12      "type": "image/png"
13    }
14  ]
15}

browserconfig.4f7ed21b.xml

1<?xml version="1.0" encoding="utf-8"?>
2<browserconfig>
3  <msapplication>
4    <tile>
5      <square150x150logo src="build/icons/mstile-150x150.f37b040c.png"/>
6    </tile>
7  </msapplication>
8</browserconfig>

Licence

ISC