Nutritious Pumpkin Mash

    babel-plugin-path-chunk-name

    1.3.1 • Public • Published

    babel-plugin-path-chunk-name

    Build Status License No Dependencies

    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.

    Keywords

    none

    Install

    npm i babel-plugin-path-chunk-name

    DownloadsWeekly Downloads

    1,580

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    242 kB

    Total Files

    16

    Last publish

    Collaborators

    • bloody-ux