Webpack: girdileri CommonsChunkPlugin ile birden çok ortak parçaya nasıl gruplanır?

Question

İki sayfa var Page1 ve Page2, bunların her ikisi de tek bir dosya olarak ayıklamak istediğiniz jquerybackbone gibi bazı kitaplık (satıcılar) kullanın, sonra paylaşılan modülleri (satıcıları hariç) başka bir ayıklamak istiyorum

page1.js içeren,

common.js webpack zamanını içerir: yukarıdaki yapılandırma ile Ancak

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; 

: tek bir dosya bu webpack yapılandırma olduğunu ler page1 modülleri ve paylaşılan modülleri

page2.js

belirtilen page2 belirtilen modülleri ve paylaşılan modülleri

page1.js demektir ve page2.js çok fazla tekrar kodlarını içerir

içerir.

Sonra yapılandırma değiştirmeye çalışmış: Sonra

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 çalışma zamanını ve satıcı kütüphanelerini içerir ve paylaşılan modülleri

vendor.js webpack çalışma zamanını ve satıcıyı içeren kütüphaneler.

page1.js içeren page1 belirtilen modüller

page2.js içeren page2 belirtilen modüller

O yaklaşmak görünüyor ama common.js satıcıları

Bir sorun

içermemelidir?

Answer 1

Birden ortak öbek demetleri istiyorsanız, gösterilen in the example gibi her ortak paket için tüm parçalar ayrıntıları belirtmek gerekir:

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

Not CommonsChunkPlugin ait chunks seçenek girişlerde adın ifade ettiğini sen hedefliyorsun vendor'u common'dan bölmek istediğiniz gibi, vendor ortak-yığın ve common için aynı vendor girişini istediğinizi açıkça belirtmeniz gerekir.