更改WebPack Chunk 的chunk entry-module\deferred-modules | Angular Builders WebPack 插件

问题描述

我正在编写一个带有一些 WebPack 插件的 Angular Builder，我遇到的问题是我的构建后的块包括以下自执行子模块：==> [[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,__webpack_require__) {
        //... exports of main modules...
    }),"other-modules": (function(module,__webpack_require__) {
        //... exports of main module...
    })
},[[0,"runtime"]]]);

在所有情况下，我都需要从延迟模块列表中删除运行时块，使其看起来像这样 ==> [[0]]]);

此外，下面的代码可以通过 selfExecute 标记使块不可自执行，如果为真，则将 chunk.entryModule 分配给 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; }
    }
  }
}

在需要自执行的多个块上运行此插件后，WebPack 运行时将有多个 id 为“0”的块，这会导致冲突。

所以我的问题是如何修改这个插件，使延迟模块指向一个特定的子模块而不是“0”以避免冲突，如下：注意最后一行 ==> },[["chunk1-主模块"]]]);而不是“0”

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["chunk-name"],[["chunk1-main-module"]]]);

解决方法

由于以下 WebPack 插件 webpack-remove-empty-js-chunks-plugin

的代码，我找到了解决问题的更好方法

我正在删除运行时 ==> [[0,"runtime"]]]);通过迭代 chunk._groups 从延迟模块中找到运行时块。这有助于将其从延迟模块列表中删除，但不会删除实际的运行时块。我曾经在构建后从 dist 文件夹中删除它。

相反，我使用以下插件从构建资产中删除运行时块：

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[_]);
  }
}

至于避免引入具有相同 ID“0”的模块的多个块之间的冲突的另一个问题，我正在使用以下插件：

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`;
    });
  }
}

最终输出块：

(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"]]]);

想分享答案，因为在网上很难找到 WebPack 解决方案。

谢谢！