Webpack Async Chunk Names Plugin

0.1.1 verified Sat Apr 25 auth: no javascript abandoned

A webpack plugin that names on-demand chunks created by System.import() or import() by parsing the requested filename. Current version 0.1.1 is marked as WIP with expected bugs and breaking changes. It attempts to guess chunk names automatically, but has no active development or maintenance. Key differentiators: lightweight, zero-config plugin for naming async chunks. Compared to webpack's built-in chunk naming, this plugin tries to infer names from file paths.

Common errors

error Cannot find module 'webpack-async-chunk-names-plugin' ↓

cause Package not installed or not listed in dependencies

fix

npm install webpack-async-chunk-names-plugin --save-dev

error TypeError: AsyncChunkNames is not a constructor ↓

cause Incorrect import: using ESM import instead of require

fix

Use const AsyncChunkNames = require('webpack-async-chunk-names-plugin');

error Error: Only [name] placeholder is supported in chunkFilename ↓

cause Plugin expects [name] in output.chunkFilename; other placeholders may not work

fix

Set output.chunkFilename to something like '[name].[chunkhash].js'

Warnings

gotcha Package is marked as WIP and likely unmaintained; expect bugs and breaking changes. ↓

fix Consider alternative plugins or webpack built-in chunk naming.

breaking Requires webpack 2.x beta; incompatible with webpack 3+ ↓

fix If using webpack >=3, do not use this plugin; use webpack's default [name] via output.chunkFilename.

gotcha Chunk name guessing may not work for all dynamic import patterns; may produce incorrect names. ↓

fix Ensure import paths are straightforward; test chunk naming in output.

Install

npm install webpack-async-chunk-names-plugin

yarn add webpack-async-chunk-names-plugin

pnpm add webpack-async-chunk-names-plugin

Imports

AsyncChunkNames

wrong

import AsyncChunkNames from 'webpack-async-chunk-names-plugin';

correct

const AsyncChunkNames = require('webpack-async-chunk-names-plugin');

Package does not ship ESM; only CommonJS is supported.

new AsyncChunkNames()
```
new AsyncChunkNames()
```
Plugin is instantiated with no options; no constructor arguments are supported.

async chunk naming

wrong

Set output.chunkFilename without plugin or use webpack's default naming functions

correct

Use as plugin in webpack config: plugins: [new AsyncChunkNames()]

Plugin must be added to plugins array; chunkFilename must be set in output config.

Quickstart

Adds AsyncChunkNames plugin to webpack config, requiring output.chunkFilename to use [name] placeholder.

const AsyncChunkNames = require('webpack-async-chunk-names-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    chunkFilename: '[name].[chunkhash].js'
  },
  plugins: [
    new AsyncChunkNames()
  ]
};