webpack-inject-chunk-filename-plugin

Webpack Plugin that injects chunks filename to outputs or any files you define.

Install

npm i webpack-inject-chunk-filename-plugin -D

Usage

Inject chunks to another chunk

Inject chunk's filename to outputs. you should make sure each chunks have name, so that the plugin can find it.

Suppose you have two chunks, app and lib. You want to inject chunk lib's output filename to chunk app's output source.

First, add a placeholder such as inject-tag-lib in chunk app's source file

import lib from './lib'
console.log('inject-tag-lib')

Second, configure plugin

const InjectChunkFilenamePlugin = require('webpack-inject-chunk-filename-plugin')

module.exports = {
  context: __dirname,
  entry: {
    app: './example.js' // make sure your chunk have name
  },
  output: {
    libraryTarget: 'umd',
    path: dist,
    filename: 'bundle.js'
  },
  plugins: [
    new InjectChunkFilenamePlugin([ // configure plugin here
      {
        targetChunk: 'app',
        rules: [
          {
            regex: /inject-tag-lib/,
            injectChunk: 'lib'
          }
        ]
      }
    ])
  ],
  optimization: { // your split chunks
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      cacheGroups: {
        lib: {
          name: 'lib', // make sure your chunk have name
          test: /lib/,
          filename: 'lib.[hash:8].js'
        }
      }
    }
  }
}

Last, build and see what you got

In chunk app's output source, inject-tag-lib will be replaced will lib.51be9832.js

...
console.log('lib.51be9832.js')
...

Inject chunks to a template file you want

Using targetTemplate in your config, targetTemplate.entry is your template file's absolute path and targetTemplate.filename is the output filename.

const InjectChunkFilenamePlugin = require('webpack-inject-chunk-filename-plugin')


module.exports = {
  context: __dirname,
  entry: {
    app: './example.js'
  },
  output: {
    libraryTarget: 'umd',
    path: dist,
    filename: 'bundle.[hash:8].js'
  },
  plugins: [
    new InjectChunkFilenamePlugin([
      {
        targetTemplate: {
          entry: resolve('./template.js'),
          filename: 'template.[hash:8].js'
        },
        rules: [
          {
            regex: /inject-tag-lib1/,
            injectChunk: 'lib1'
          },
          {
            regex: /inject-tag-lib2/,
            injectChunk: 'lib2'
          }
        ]
      }
    ])
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      cacheGroups: {
        lib1: {
          name: 'lib1',
          test: /lib1/,
          filename: 'lib1.[hash:8].js'
        },
        lib2: {
          name: 'lib2',
          test: /lib2/,
          filename: 'lib2.[hash:8].js'
        }
      }
    }
  }
}

Options

Name	Type	Description
targetChunk	string	chunk to be injected filename
targetTemplate.entry	string	template file's absolute path
targetTemplate.filename	string	template file's output filename
rules[n].regex	object	regex match chunk placeholder
rules[n].injectChunk	string	chunk will be injected