webpack-custom-async-chunk-names-plugin

A webpack plugin for naming on-demand chunks, forked from kostasmanionis/webpack-async-chunk-names-plugin

Usage no npm install needed!

<script type="module">
  import webpackCustomAsyncChunkNamesPlugin from 'https://cdn.skypack.dev/webpack-custom-async-chunk-names-plugin';
</script>

README

webpack-custom-async-chunk-names-plugin

Forked from https://github.com/kostasmanionis/webpack-async-chunk-names-plugin

Why?

Webpack 2 no longer let's you name your cunks generated by System.import() or import(). So you would get chunks named 0.js etc. This plugn attempts to guess the chunk name by parsing the requested filename.

If you need a more robust solution, PR are very welcome.

Installation

As a devDependency!

npm i webpack-custom-async-chunk-names-plugin -D
yarn add webpack-custom-async-chunk-names-plugin -D

Usage

const AsyncChunkNames = require('../index');
const filenamify = require('filenamify');

module.exports = {
    entry: __dirname + '/entry.js',
    output: {
        path: __dirname + '/output',
        filename: 'output.js',
        chunkFilename: '[name].js'
    },
    plugins: [
        new AsyncChunkNames({
          parser: function(filepath) {
            return filenamify(filepath);
          }
        })
    ]
};

Don't forget to set output.chunkFilename!