inject-assets-webpack-plugin

inject-assets-webpack-plugin

A plugin for webpack 4 which replaces assets with it's output filenames in other assets. It was created to be used for caching in service workers.

The plugin comes in handy when you add hashes to your assets during the webpack build.

It can also be used in watch mode.

installation

npm i -D @mightyplow/inject-assets-webpack-plugin

usage

The assets you want to be replaced have to be wrapped in double curly braces. The assets can only be replaced if the target is also a webpack asset.

So for example if you want to replace the assets in a service worker, it has either be built by webpack or at least run through another plugin. Personally I like to use the copy-webpack-plugin to copy the service worker to the target directory.

examples

Let's assume, our service worker has the following content

// serviceWorker.js
const FILES_TO_CACHE = [
    '/',
    '{{vendor}}',
    '{{app}}'
]

The asset names should be replaced by the output filename specified in the webpack config (or it's plugins).

copied with webpack-copy-plugin

// webpack.config.js
const CopyPlugin = require('copy-webpack-plugin');
const InjectAssetsPlugin = require('@mightyplow/inject-assets-webpack-plugin');

...

plugins: [
    new CopyPlugin([
        {
            from: './src/serviceWorker.js',
            to: './'
        }
    ]),
    
    new InjectAssetsPlugin({
        targets: ['serviceWorker.js']
    })
]
...

build with webpack

// webpack.config.js
const InjectAssetsPlugin = require('@mightyplow/inject-assets-webpack-plugin');

...

entry: {
    serviceWorker: path.join(__dirname, 'src', 'serviceWorker.js')
},

plugins: [
    new InjectAssetsPlugin({
        targets: ['serviceWorker']
    })
]
...