babel-plugin-path-chunk-name

Why we need this?

• By default, webpack will generate dynamic chunks named with numeric value, say 0.js.
• It's troublesome to add magic comments: webpackChunkName to every dynamic imports.
• It's not easy to use webpack.NamedChunksPlugin.
• Most of the time, we just want to keep the folder structure for dynamic chunks to easy debugging.

Installation

yarn

yarn add babel-plugin-path-chunk-name

npm

npm install babel-plugin-path-chunk-name

.babelrc:

{
  "plugins": ["path-chunk-name"]
}

What it does

Taking from the test snapshots, it does this:

import(/* webpackPrefetch: true */"./Foo")
 
      ↓ ↓ ↓ ↓ ↓ ↓
 
import(/* webpackPrefetch: true , webpackChunkName: 'Foo'*/"./Foo");

And if you're using dynamic imports:

import(`./base/${page}`)
 
      ↓ ↓ ↓ ↓ ↓ ↓
 
import(/* webpackChunkName: 'base/[request]' */`./base/${page}`);

And if with delay opts enabled

 
import(\\"./Foo\\")
 
      ↓ ↓ ↓ ↓ ↓ ↓
 
() => import(/* webpackChunkName: 'Foo' */"./Foo");
 

For more usages, please find the detail in ./__tests__/index.js

Options

delay： tells whether convert import expression to arrow function.

Say, import('./xxx') => () => import(/* webpackChunkName: 'xxx' */'./xxx')

But since 1.2.0 version, calling then method after importing will ignore lazy.

Say import('./xxxx').then(yyyy) => import(/* webpackChunkName: 'xxxx'*/'./xxxx').then(yyyy)

And since 1.3.0 version, if import is already in delay mode, say () => import('./foo')， delay will do nothing.