वेबपैक: CommonsChunkPlugin के साथ कई आम भागों में प्रविष्टियों को कैसे बंडल करें?

Question

उन दोनों jquerybackbone जो मैं एक एकल फाइल के रूप में निकाला जा चाहते हैं, तो मैं चाहता हूँ साझा मॉड्यूल (विक्रेताओं को बाहर) एक और को निकाले जाने की तरह कुछ पुस्तकालय (विक्रेताओं) का उपयोग मैं दो पृष्ठों Page1 और Page2 है कहो,

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; 

हालांकि इसके बाद के संस्करण config साथ

: एकल फाइल, इस webpack config है

common.js webpack क्रम होता है,

page1.js शामिल रों पृष्ठ 1 निर्दिष्ट मॉड्यूल और साझा मॉड्यूल

page2.js पृष्ठ 2 निर्दिष्ट मॉड्यूल और साझा मॉड्यूल

कौन सा page1.js का अर्थ है और page2.js भी कई दोहराने कोड हैं शामिल हैं।

तब मैं 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 
}), 

फिर

common.js webpack क्रम और विक्रेता लाइब्रेरी शामिल हैं, और साझा मॉड्यूल

vendor.js webpack क्रम और विक्रेता शामिल पुस्तकालयों।

page1.js शामिल पृष्ठ 1 निर्दिष्ट मॉड्यूल

page2.js शामिल पृष्ठ 2 निर्दिष्ट मॉड्यूल

यह करीब लगता है, लेकिन 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"] 
     })   
    ] 
}; 

ध्यान दें कि CommonsChunkPlugin की chunks विकल्प प्रविष्टियों के नाम से संबंधित आप लक्ष्य जैसा कि आप को common से विभाजित करना चाहते हैं, आपको स्पष्ट रूप से कहना होगा कि आप केवल vendor प्रविष्टि vendor सामान्य-खंड में और common के लिए ही चाहते हैं।