Webpack：CommonsChunkPluginでエントリを複数の一般的なチャンクに束ねるには？

Question

私はPage1とPage2という2つのページがあるとします。jquerybackboneのようないくつかのライブラリ（ベンダー）を使用して、1つのファイルとして抽出したい場合は、共有モジュール（ベンダーを除外）を別のファイル単一のファイル、これは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が含まれていますSのページ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含まれPage1の指定されたモジュール

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

注CommonsChunkPluginのchunksオプションは、エントリの名前を参照することあなたは目標にします。 vendorをcommonに分割する場合は、vendorコモンチャンクにはvendorエントリのみを入力し、commonには同じ入力をしたいと明示する必要があります。