{"id":22930,"library":"vite-plugin-webpackchunkname","title":"Vite Plugin WebpackChunkName","description":"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.","status":"active","version":"1.0.4-beta.1","language":"javascript","source_language":"en","source_url":"https://github.com/CaptainLiao/vite-plugin-webpackchunkname","tags":["javascript","vite plugin","vite webpackchunkname","rollup webpackChunkName","manualChunks","typescript"],"install":[{"cmd":"npm install vite-plugin-webpackchunkname","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-webpackchunkname","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-webpackchunkname","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required to function as a Vite plugin","package":"vite","optional":false}],"imports":[{"note":"Export is named, not default. Must use destructured import.","wrong":"import manualChunksPlugin from 'vite-plugin-webpackchunkname'","symbol":"manualChunksPlugin","correct":"import { manualChunksPlugin } from 'vite-plugin-webpackchunkname'"},{"note":"TypeScript users can import the options type for strict typing.","wrong":null,"symbol":"ManualChunksPluginOptions","correct":"import type { ManualChunksPluginOptions } from 'vite-plugin-webpackchunkname'"},{"note":"CommonJS require works but must use destructuring for named exports.","wrong":"const manualChunksPlugin = require('vite-plugin-webpackchunkname')","symbol":"vite-plugin-webpackchunkname","correct":"const { manualChunksPlugin } = require('vite-plugin-webpackchunkname')"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { manualChunksPlugin } from 'vite-plugin-webpackchunkname';\n\nexport default defineConfig({\n  plugins: [\n    manualChunksPlugin({\n      // optional: custom manual chunks override\n      manualChunks: (id: string) => {\n        if (id.includes('node_modules/lodash/')) return 'lodash';\n      }\n    })\n  ]\n});\n\n// In your code, use dynamic imports with webpackChunkName comment:\n// import(/* webpackChunkName: \"detail\" */ '@/detail/somepage.vue')","lang":"typescript","description":"Configures the plugin in vite.config.ts with optional custom manual chunks, and demonstrates how to use webpackChunkName magic comments in dynamic imports."},"warnings":[{"fix":"Use v1.x for Vite 5, v0.2.x for Vite 4. Check your Vite version before installing.","message":"v1.x supports Vite 5; v0.x supports Vite 4 or lower. Upgrading Vite requires matching plugin major version.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Plugin cannot chunk node_modules packages; use Rollup manualChunks for that.","message":"Third-party packages are not supported. The plugin only works for your own code dynamic imports.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Pass manualChunks callback to manualChunksPlugin() instead of setting it in Vite config build.rollupOptions.output.manualChunks.","message":"Plugin overrides build.rollupOptions.output.manualChunks. Custom manual chunks must be passed via the plugin option, not Rollup config.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Add the include option to Components() as shown in the README.","message":"When using unplugin-vue-components, you must add 'include: [/\\\\.vue$/, /\\\\.vue\\\\?/]' to avoid the plugin breaking dynamic imports.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use import { manualChunksPlugin } from 'vite-plugin-webpackchunkname'.","cause":"Imported as default instead of named export.","error":"TypeError: manualChunksPlugin is not a function"},{"fix":"Use manualChunks rollup option for third-party packages.","cause":"Plugin does not support node_modules.","error":"Error: Dynamic imports with webpackChunkName not working for third-party packages"},{"fix":"Remove manualChunks from Vite config and use plugin option instead.","cause":"Setting manualChunks in build.rollupOptions.output while plugin is active.","error":"[vite] server configuration error: property 'manualChunks' is not allowed"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}