Webpack: jak grupować wpisy na wiele typowych porcji za pomocą CommonsChunkPlugin?

Question

Powiedz, mam dwie strony Page1 i Page2, oba z nich korzystać niektóre biblioteki (dostawców) jak jquerybackbone którym chcę być wyodrębnione w postaci jednego pliku, a następnie chcę wspólne moduły (wykluczenie dostawców) do ekstrakcji w innym pojedynczy plik jest to konfiguracja 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; 

jednak z powyższej konfiguracji:

common.js zawiera WebPACK środowiska wykonawczego

page1.js zawierać s page1 określone moduły i wspólnych modułów

page2.js zawiera STR.2 określone moduły i wspólnych modułów

oznacza Które page1.js i page2.js zawiera zbyt wiele kodów powtarzania.

Potem próbowałem zmienić config:

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

Następnie

common.js zawiera runtime WebPACK i bibliotek dostawców i wspólne moduły

vendor.js zawiera runtime WebPACK i sprzedawca biblioteki.

page1.js zawiera STR.1 określone moduły

page2.js zawiera STR.2 określone moduły

Wydaje się to bliżej, ale nie powinny zawierać common.js sprzedawców

coś się stało?

Answer 1

Jeśli chcesz wiele wiązek wspólny bryłki, musisz określić wszystkie kawałki dane dla każdej wspólnej wiązce jak pokazano 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"] 
     })   
    ] 
}; 

Uwaga że opcja CommonsChunkPluginchunks odnosi się do nazwy wpisami celujesz. Jeśli chcesz podzielić vendor z common, musisz jednoznacznie powiedzieć, że chcesz tylko vendor wpisu w vendor common-chunk i to samo dla common.