Webpack: Wie werden Einträge mit CommonsChunkPlugin zu mehreren gemeinsamen Blöcken zusammengefasst?

Question

Sagen, ich habe zwei Seiten Page1 und Page2, beide von ihnen verwenden einige Bibliothek (Anbieter) wie jquerybackbone, die ich als eine einzige Datei extrahiert werden soll, dann möchte ich die freigegebenen Module (ausschließen die Anbieter) in einem anderen extrahiert werden einzelne Datei, ist dies die webpack config:

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; 

jedoch mit dem oben config:

common.js enthält webpack Laufzeit,

page1.js enthalten s page1 Module und gemeinsame Module angegeben

page2.js enthält Module page2 angegeben und gemeinsam genutzte Module

Was bedeutet page1.js und page2.js enthält zu viele Wiederholungscodes.

Dann habe ich versucht, die Config zu ändern:

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 
}), 

Dann

common.js enthält die webpack Laufzeit und die Herstellerbibliotheken und der gemeinsam genutzten Module

vendor.js enthält die webpack Laufzeit und den Verkäufer Bibliotheken.

page1.js enthält Seite1 aufgeführten Module

page2.js enthält page2 angegebenen Module

Es scheint, es näher zu kommen, aber die common.js sollte nicht enthalten die Anbieter

Alles, was nicht in Ordnung?

Answer 1

Wenn Sie mehrere gemeinsame Brocken Bündel wollen, werden Sie alle Stücke Details für jedes gemeinsame Bündel wie gezeigt in the example angeben:

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"] 
     })   
    ] 
}; 

Beachten Sie, dass die chunks Option von CommonsChunkPlugin bezieht sich auf den Namen der Einträge du zielst. Wie Sie vendor von common teilen möchten, müssen Sie explizit sagen, dass Sie nur vendor Eintrag in vendor Common-Chunk und dasselbe für common möchten.