webpackwebpack-pluginangular-builder

Change the chunk entry-module\deferred-modules of WebPack Chunk | Angular Builders WebPack Plugin


I'm writing an Angular Builder with some WebPack plugins and the issue I have is that my chunk after build including the self-execute sub-modules as following: ==> [[0, "runtime"]]]);

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["chunk-name"],{
    0: (function(module, exports, __webpack_require__) {
        module.exports = __webpack_require__("chunk1-main-module");
    }),
    "chunk1-main-module": (function(module, exports, __webpack_require__) {
        //... exports of main modules...
    }),
    "other-modules": (function(module, exports, __webpack_require__) {
        //... exports of main module...
    })
},[[0, "runtime"]]]);

In all scenarios I need to drop the runtime chunk from the deferred-modules list to look like that ==> [[0]]]);

Also the below code is able to make the chunk not self-executable, through selfExecute tag and if it's true it assign chunk.entryModule to undefined.

export class ChunkIdPlugin {
    constructor(private selfExecute: boolean = false) { }

    public apply = (compiler: Compiler): void =>
        compiler.hooks.compilation.tap("ChunkIdPlugin", this.beforeChunkIds);

    private beforeChunkIds = (compilation: compilation.Compilation): void =>
        compilation.hooks.beforeChunkIds.tap("ChunkIdPlugin", this.iterateChunks);

    private iterateChunks = (chunks: compilation.Chunk[]): void => {
        const chunk = chunks.find(_ => _.name === 'main');
        if (!chunk) return;
        chunk.id = this.chunkId as any;

        // If scenario demand that chunk doesn't self-execute assign the chunk.entryModule to undefined
        (!this.selfExecute || chunk._groups.size < 1) && (chunk.entryModule = undefined);

        // Loop through chunks and remove runtime chunk from compilation
        for (let group of chunk._groups) {
            const chunk = group.chunks.find(_ => _.name === 'runtime');
        if (chunk) { chunk.remove(); break; }
    }
  }
}

After running this plugin on multiple chunks that require self-execute, WebPack runtime will have multiple chunks with id "0" which would lead to a conflict.

So my question is how to modify this plugin to make the deferred-modules to point to a specific submodule instead of "0" to avoid the conflict, as following: notice last line ==> },[["chunk1-main-module"]]]); instead of "0"

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["chunk-name"],{
    0: (function(module, exports, __webpack_require__) {
        module.exports = __webpack_require__("chunk1-main-module");
    }),
    "chunk1-main-module": (function(module, exports, __webpack_require__) {
        //... exports of main module...
    })
},[["chunk1-main-module"]]]);


Solution

  • I found a better way to solve the issue thanks to the code of the following WebPack plugin webpack-remove-empty-js-chunks-plugin

    I was removing the runtime ==> [[0, "runtime"]]]); from deferred-modules by iterating chunk._groups and find the runtime chunk. That helped to remove it from deferred-modules list, but not removing the actual runtime chunk. I used to delete it from dist-folder post-build.

    Instead, I'm using the following plugin to drop the runtime chunk from build assets:

    import { Compiler, compilation } from "webpack";
    
    export class RuntimeRemoverPlugin {
        constructor() { }
    
        public apply = (compiler: Compiler): void =>
            compiler.hooks.emit.tap("RuntimeRemoverPlugin", this.onEmit);
    
        private onEmit = (compilation: compilation.Compilation): void => {
            compilation.chunks.splice(compilation.chunks.findIndex(_ => _.id === 'runtime' || _.name === 'runtime'), 1);
            Object.keys(compilation.assets)
                .filter(_ => _.startsWith('runtime'))
                .forEach(_ => delete compilation.assets[_]);
      }
    }

    As for the other issue to avoid the conflict between multiple chunks introducing a module with same id "0", I'm using the following plugin:

    import { compilation, Compiler } from "webpack";
    
    export class PostModuleIdPlugin {
        constructor(private chunkId: string) { }
    
        public apply = (compiler: Compiler): void =>
            compiler.hooks.compilation.tap("PostModuleIdPlugin", this.afterModuleIds);
    
        private afterModuleIds = (compilation: compilation.Compilation): void =>
            compilation.hooks.afterOptimizeModuleIds.tap("PostModuleIdPlugin", this.iterateModules);
    
        private iterateModules = (modules: compilation.Module[]): void => {
            modules.forEach((_module: compilation.Module) => {
                if (_module.id === 0) _module.id = `${this.chunkId}__entry`;
        });
      }
    }

    The final output chunk:

    (window["webpackJsonp"] = window["webpackJsonp"] || []).push([["chunk_name"], {
        "chunk_name__module-a": (function (module, __webpack_exports__, __webpack_require__) {
            ...
        }),
        "chunk_name__entry": (function (module, exports, __webpack_require__) {
            module.exports = __webpack_require__("chunk_name__module-a");
        }),
    }, [["chunk_name__entry"]]]);

    Thought to share the answer, as it's kinda hard to find WebPack solutions online.

    Thanks!