Webpack: как связать записи с несколькими общими кусками с помощью CommonsChunkPlugin?

Скажем, у меня есть две страницы Page1 и Page2, обе из них используют некоторую библиотеку (вендоров), такую ​​как jquery backbone, которую я хочу извлечь как один файл, тогда мне нужны общие модули ( исключить поставщиков), которые будут извлечены в другом отдельном файле, это конфигурация webpack:

function listFiles(srcpath) {
    return fs.readdirSync(srcpath).filter(function (file) {
        return fs.statSync(path.join(srcpath, file)).isDirectory();
    });
}
var createEntry = function (src) {
    var dest = {
        vendor: ["backbone", "underscore"]
    };
    var files = listFiles(src);
    files.forEach(function (dir) {
        var name = dir;
        dest[name] = src + "/" + dir + "/entry.js";
    });
    return dest;
};

//each sub directory contains a `entry.js` as the entry point for the page
var entries = createEntry("./app/pages");//    {vender:['jquery','backbone'],page1:'src/page1/entry.js',page2:'src/page2/entry.js'    }

var config = {
    resolve: {
        root: path.resolve('./app/'),
        extensions: ['', '.js']
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'common.js',
            minChunks: 2
        })
    ],
    entry: entries,
    output: {
        path: './../main/webapp/static/dist',
        filename: '[name].js',
        publicPath: '/static/dist'
    }
};
module.exports = config;

Однако с приведенной выше конфигурацией:

common.js содержит время выполнения webpack,

page1.js содержит указанные модули и общие модули <1 >

page2.js содержит указанные модули и разделяемые модули <2 >

Это означает, что page1.js и page2.js содержат слишком много кодов повторения.

Затем я попытался изменить конфигурацию:

var entries = createEntry("./app/pages");
var chunks = [];
for (var k in entries) {
    if (k === 'vendor')
        continue;
    chunks.push(k);
}


new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),
new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    filename: 'common.js',
    minChunks: 2,
    chunks:chunks
}),

Тогда

common.js содержит среду выполнения webpack и библиотеки поставщиков, а также совместно используемые модули

vendor.js содержит среду выполнения webpack и библиотеки поставщиков.

page1.js содержит указанные модули 1 страницы

page2.js содержит указанные модули <2 >

Кажется, он приближается, но common.js не должен содержать поставщиков

Что-то не так?

Ответ 1

Если вам нужно несколько общих пакетов пакетов, вам нужно будет указать все детали кусков для каждого общего пакета, как показано в примере:

var config = {

    entry: {
        vendor: ["backbone", "underscore"],
        common: "./app/pages/common/entry.js",
        page1: "./app/pages/page1/entry.js",
        page2: "./app/pages/page2/entry.js"
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            chunks: ["vendor"]
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "common",
            chunks: ["common"]
        })        
    ]
};

Обратите внимание, что параметр chunks CommonsChunkPlugin относится к названию целевых объектов. Поскольку вы хотите разделить vendor на common, вам нужно явно указать, что вы хотите только запись vendor в vendor common-chunk и такую ​​же для common.