webpack5-chunk-renamer

This plugin helps with chunk naming in webpack. To use it you need at least webpack 5.88.2

Install

pnpm install webpack5-chunk-renamer--save-dev

or if you are using yarn

yarn add webpack5-chunk-renamer--save-dev

Usage

const ChunkRenamePlugin = require("webpack5-chunk-renamer");

module.exports = {
  ...
  plugins: [
    new ChunkRenamePlugin(objectWithOptions),
  ],
}

Option|Type|Description --|--|-- initialChunksWithEntry|boolean\|string|Rename all chunks which are satisfy the condition chunk.hasEntryModule() && chunk.isOnlyInitial. If true is passed then use output.filename option, if string is passed, use it as chunk name i.e. you can use all placeholder for chunk naming like [hash],[name],[chunkhash] etc. asyncChunks|string|Use provided string to rename all async chunks. Just like for previous option, standart placeholders could be used. [chunkName]|string|Use provided string to rename specific chunk.

Examples

The result of the code below will be: use filename option for all chunks with entry and "specialName.[name].js" template for mySpecialChunk chunk (assuming you're not using it as a test option for splitChunks.cacheGroups).

module.exports = {
  output: {
    filename: "[name].js",
    chunkFilename: "[name].[chunkhash].js",
  },
  entry: {
    mySpecialChunk: "path/to/my/chunk",
    ....
  },
  ....
  plugins: [
    new ChunkRenamePlugin({
      initialChunksWithEntry: true,
      mySpecialChunk: "specialName.[name].js",
    }),
  ],
}

Motivation

Currently if you want to move webpack runtime into the separate file you will use optimization.runtimeChunk option, you all of the chunks, which do not have runtime in them will use output.chunkFilename for the filename, event if it contains entry. See issue.
There are a few plugins for chunk renaming, however i haven't found plugin that is compatible with webpack 4.