import { ConcatSource } from 'webpack-sources' const isImportChunk = /^chunks[/\\].*\.js$/ const matchChunkName = /^chunks[/\\](.*)$/ class DynamicChunkTemplatePlugin { apply (chunkTemplate) { chunkTemplate.plugin('render', function (modules, chunk) { if (!isImportChunk.test(chunk.name)) { return modules } const chunkName = matchChunkName.exec(chunk.name)[1] const source = new ConcatSource() source.add(` __NEXT_REGISTER_CHUNK('${chunkName}', function() { `) source.add(modules) source.add(` }) `) return source }) } } export default class DynamicChunksPlugin { apply (compiler) { compiler.plugin('compilation', (compilation) => { compilation.chunkTemplate.apply(new DynamicChunkTemplatePlugin()) compilation.plugin('additional-chunk-assets', (chunks) => { chunks = chunks.filter(chunk => isImportChunk.test(chunk.name) && compilation.assets[chunk.name] ) chunks.forEach((chunk) => { // This is to support, webpack dynamic import support with HMR const copyFilename = `chunks/${chunk.name}` compilation.additionalChunkAssets.push(copyFilename) compilation.assets[copyFilename] = compilation.assets[chunk.name] }) }) }) } }