Блог

Главная - Вопросы по программированию - Измените запись фрагмента-модульотложенные-модули плагина WebPack Chunk | Angular Builders WebPack

Измените запись фрагмента-модульотложенные-модули плагина WebPack Chunk | Angular Builders WebPack

#webpack #webpack-plugin #angular-builder

Вопрос:

Я пишу угловой конструктор с некоторыми плагинами WebPack, и проблема, с которой я столкнулся, заключается в том, что мой фрагмент после сборки включает в себя самоисполняющиеся подмодули следующим образом: ==> [[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 modules...
    }),
    "other-modules": (function(module, exports, __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) amp;amp; (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 будет иметь несколько блоков с идентификатором «0», что приведет к конфликту.

Поэтому мой вопрос в том, как изменить этот плагин, чтобы отложенные модули указывали на определенный подмодуль вместо «0», чтобы избежать конфликта, как показано ниже: обратите внимание на последнюю строку==>}, [[«chunk1-основной модуль»]]]); вместо «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"]]]);

Ответ №1:

Я нашел лучший способ решить эту проблему благодаря коду следующего плагина WebPack webpack-удалить-пустые-js-куски-плагин

Я удалял время выполнения ==> [[0, «время выполнения»]]]); из отложенных модулей путем итерации фрагмента._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[_]);
  }
}

Что касается другой проблемы, чтобы избежать конфликта между несколькими блоками, представляющими модуль с одинаковым идентификатором «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"]]]);

Подумал поделиться ответом, так как довольно сложно найти решения для веб-пакетов в Интернете.

Спасибо!

Метки: