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

Я пытаюсь использовать параметр multi-compiler в webpack и следую example в своем github. Однако я не могу понять, как я могу разделить общий код среди множества конфигураций.

Например, у меня могут быть одинаковые библиотеки поставщиков, используемые в разных наборах конфигураций. Я хотел бы, чтобы эти общие коды были объединены в один общий файл.

Я попробовал следующее, но в итоге создал отдельные пакеты записи vendors для каждой конфигурации компиляции.

var path = require("path");
var webpack = require("webpack");
module.exports = [
    {
        name: "app-mod1",
        entry: {
            vendors: ['jquery', 'react', 'react-dom'],
            pageA: ['./mod1/pageA'],
            pageB: ['./mod1/pageB']
        },
        output: {
            path: path.join(__dirname, "/mod1/js"),
            filename: "[name].bundle.js"
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendors'],
                minChunks: Infinity
            })
        ]
    },
    {
        name: "app-mod2",
        entry: {
            vendors: ['lodash', 'react', 'react-dom'],
            pageA: ['./mod2/pageA'],
            pageB: ['./mod2/pageB']
        },
        output: {
            path: path.join(__dirname, "/mod2/js"),
            filename: "[name].bundle.js"
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendors'],
                minChunks: Infinity
            })
        ]
    }
];

Так как реакция, реакция-достояние разделяются между двумя компиляциями, я намерен их объединить в виде одного файла, который может быть общим, вместо того, чтобы создавать один и тот же комплект для каждой компиляции.

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

Ответы

Ответ 1

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

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

TL; DR

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

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

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

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

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

Alternative

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

Другое значение, которое стоит упомянуть

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

Ответ 2

Я узнал об этом сейчас, и эта тема кажется довольно трудной для понимания в документах 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