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

Question

Скажем, у меня есть две страницы Page1 и Page2, обе из них используют некоторую библиотеку (вендоры), такую ​​как jquerybackbone, которую я хочу извлечь как один файл, тогда я хочу, чтобы разделяемые модули (исключая поставщиков) были извлечены в другом один файл, это 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 содержит PAGE2 указаны модули и общие модули

Это означает 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 содержит PAGE2 указанный модуль

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

Что-нибудь случилось?

Answer 1

Если вы хотите использовать несколько связок общего фрагмента, вы должны указать все Куски деталь для каждого общего пучка, как показанный in the example:

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.