webpack-chunkname-loader

Add webpackChunkName magic comments to your dynamic imports

Usage no npm install needed!

<script type="module">
  import webpackChunknameLoader from 'https://cdn.skypack.dev/webpack-chunkname-loader';
</script>

README

webpack-chunkname-loader

CI codecov

Adds webpackChunkName magic coments to your dynamic import statements.

If you need other magic comments or more configuration options use magic-comments-loader.

Usage

First npm install webpack-chunkname-loader.

Configuration

Add this inside your webpack.config.js:

module: {
  rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['webpack-chunkname-loader']
    }
  ]
}

You can supply an option to include webpackMode magic comments:

module: {
  rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'webpack-chunkname-loader',
          options: {
            webpackMode: 'eager'
          }
        }
    }
  ]
}

Magic Comments

With webpack-chunkname-loader added to your webpack build, the following dynamic import:

const dynamicModule = await import('./path/to/some/module')

becomes:

const dynamicModule = await import(/* webpackChunkName: "path-to-some-module" */ './path/to/some/module')