Извлечение общих кусков среди множества конфигураций компилятора в webpack?

Краткий ответ

Вы не можете выполнять эту работу так, как хотите.

TL; DR

@Carven, я боюсь, что вы не можете достичь своей цели через MultiCompilerWebpack, Compilerне предназначен для выполнения этой работы, по крайней мере, для близкой функции.

См. Исходный код для запуска экземпляра MultiCompiler , он фактически инициирует отдельные Compilerэкземпляры. У этих компиляторов нет данных, разделяемых между ними.

См. Также источник запуска экземпляра MultiCompiler, экземпляр компиляторов также запускается отдельно без совместного использования данных.

Единственное, что разделяют эти компиляторы, это Statsэкземпляр, который они производят и объединяются в a MultiStats.

Кстати, в примере, в котором вы упомянули , нет никаких подсказок, что некоторые модули разделяются между несколькими компиляторами.

альтернатива

Как описано в @ Tzook-Bar-Noy, IMHO, вы должны использовать muti-entries для создания набора MPA (многостраничное приложение).

Другое заслуживающее упоминания

Я заметил, что библиотека, называемая webpack-multi-configurator , использует функцию мультикомпилятора. Но я не думаю, что он будет обмениваться общими частями.

Я узнал об этом сейчас, и эта тема кажется довольно трудной для понимания в документах webpack. Мне удалось создать что-то, что работает, поскольку оно создало 2 отдельных файла и извлекло общие зависимости к другому файлу.

Вот моя конфигурация webpack:

{
    entry: {

        pageA: "./first/first",
        pageB: "./second/second"
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: "[name].js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ["vendor", "common"],
        })
    ]
};

выход этого будет:

./js/
    common.js
    vendor.js
    pageA.js
    pageB.js

Я создал репо с примером, на котором я работал: https://github.com/tzookb/webpack-common-vendor-chunks

когда я открываю новый html-файл, я загружаю эти файлы:

 first page:
     common.js
     vendor.js
     pageA.js

 sec page:
     common.js
     vendor.js
     pageB.js