Registry / devops / vite-plugin-webpackchunkname

vite-plugin-webpackchunkname

library1.0.4-beta.1jsnpmunverified

A Vite plugin that enables webpack-style `webpackChunkName` magic comments for code splitting, allowing developers to name dynamic imports in Vite projects. Current stable version 1.0.4-beta.1 supports Vite 5 (v1.x) and Vite 4 or lower (v0.2.x). Key differentiator: provides a familiar webpack syntax for chunk naming on Vite/Rollup, with a simple manualChunksPlugin() API. Not for third-party packages; supports user-defined manual chunks via callback. Actively maintained with TypeScript types included.

devops http-networking

npm install vite-plugin-webpackchunkname

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-WEBPAC

vite-plugin-webpackchunkname

devopsjavascriptv1.0.4-beta.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

manualChunksPlugin

✓ import { manualChunksPlugin } from 'vite-plugin-webpackchunkname'

✗ import manualChunksPlugin from 'vite-plugin-webpackchunkname'

Export is named, not default. Must use destructured import.

ManualChunksPluginOptions

✓ import type { ManualChunksPluginOptions } from 'vite-plugin-webpackchunkname'

TypeScript users can import the options type for strict typing.

vite-plugin-webpackchunkname

✓ const { manualChunksPlugin } = require('vite-plugin-webpackchunkname')

✗ const manualChunksPlugin = require('vite-plugin-webpackchunkname')

CommonJS require works but must use destructuring for named exports.

Configures the plugin in vite.config.ts with optional custom manual chunks, and demonstrates how to use webpackChunkName magic comments in dynamic imports.

// vite.config.ts import { defineConfig } from 'vite'; import { manualChunksPlugin } from 'vite-plugin-webpackchunkname'; export default defineConfig({ plugins: [ manualChunksPlugin({ // optional: custom manual chunks override manualChunks: (id: string) => { if (id.includes('node_modules/lodash/')) return 'lodash'; } }) ] }); // In your code, use dynamic imports with webpackChunkName comment: // import(/* webpackChunkName: "detail" */ '@/detail/somepage.vue')

Debug

Known issues

breakingv1.x supports Vite 5; v0.x supports Vite 4 or lower. Upgrading Vite requires matching plugin major version.

fix

Use v1.x for Vite 5, v0.2.x for Vite 4. Check your Vite version before installing.

affects: >=1.0.0

gotchaThird-party packages are not supported. The plugin only works for your own code dynamic imports.

fix

Plugin cannot chunk node_modules packages; use Rollup manualChunks for that.

affects: >=0.0.1

gotchaPlugin overrides build.rollupOptions.output.manualChunks. Custom manual chunks must be passed via the plugin option, not Rollup config.

fix

Pass manualChunks callback to manualChunksPlugin() instead of setting it in Vite config build.rollupOptions.output.manualChunks.

affects: >=0.0.1

gotchaWhen using unplugin-vue-components, you must add 'include: [/\\.vue$/, /\\.vue\\?/]' to avoid the plugin breaking dynamic imports.

fix

Add the include option to Components() as shown in the README.

affects: >=0.0.1

Errors

Common errors & fixes

TypeError: manualChunksPlugin is not a function

Imported as default instead of named export.

fix

Use import { manualChunksPlugin } from 'vite-plugin-webpackchunkname'.

Error: Dynamic imports with webpackChunkName not working for third-party packages

Plugin does not support node_modules.

fix

Use manualChunks rollup option for third-party packages.

[vite] server configuration error: property 'manualChunks' is not allowed

Setting manualChunks in build.rollupOptions.output while plugin is active.

fix

Remove manualChunks from Vite config and use plugin option instead.

Upgrade

Version history

1.0.4-beta.1latest on npm

Audit

Dependencies

viterequiredPeer dependency required to function as a Vite plugin

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/CaptainLiao/vite-plugin-webpackchunkname ↗

packagehttps://www.npmjs.com/package/vite-plugin-webpackchunkname ↗