のWebPACK CommonsChunkPlugin期待通りではない作品<a href="http://webpack.github.io/docs/optimization.html#multi-page-app" rel="nofollow">docs</a>よう

Question

は言う：

応募チャンクが共通していくつかのモジュールを持っている場合は、このためのクールなプラグインがあります。 CommonsChunkPluginは共通のモジュールを識別し、それらをコモンズチャンクに入れます。

マイwebpack.config.js：

var path = require("path"); 
var webpack = require("webpack"); 

module.exports = { 
    entry: { 
     p1: "./page1", 
     p2: "./page2", 
     p3: "./page3" 
    }, 
    output: { 
     filename: "[name].entry.js", 
     path: path.join(__dirname, "dist"), 
     publicPath: "/dist/", 
     chunkFilename: "[id].chunk.js" 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin('commons.chunk.js'), 
    ] 
} 

page1.js：require(['jquery', 'lodash'], function($) { /* page 1 */ });

page2.js：require(['jquery', 'svgjs'], function($) { /* page 2 */ });

page3.js：私は何を期待require(['jquery', 'scriptjs'], function($) { /* page 3 */ });

webpack --progress --colors --display-chunksからはそれがcommons.chunk.js wi jqueryコードが含まれていますが、そうではありません。 commons.chunk.jsには最初のWebpackのものしか含まれていません。各ページチャンクにはjqueryコードが含まれています。

WebPACKの出力：

Hash: b931a47382d3148a8b55 
Version: webpack 1.12.14 
Time: 696ms 
      Asset  Size Chunks    Chunk Names 
    p1.entry.js 333 bytes 0, 6 [emitted] p1 
     1.chunk.js  761 kB 1, 6 [emitted] 
    p2.entry.js 333 bytes 2, 6 [emitted] p2 
     3.chunk.js  389 kB 3, 6 [emitted] 
    p3.entry.js 333 bytes 4, 6 [emitted] p3 
     5.chunk.js  271 kB 5, 6 [emitted] 
commons.chunk.js 3.52 kB  6 [emitted] commons.chunk.js 
chunk {0} p1.entry.js (p1) 61 bytes {6} [rendered] 
    [0] ./page1.js 61 bytes {0} [built] 
chunk {1} 1.chunk.js 738 kB {0} [rendered] 
    + 3 hidden modules 
chunk {2} p2.entry.js (p2) 60 bytes {6} [rendered] 
    [0] ./page2.js 60 bytes {2} [built] 
chunk {3} 3.chunk.js 376 kB {2} [rendered] 
    + 2 hidden modules 
chunk {4} p3.entry.js (p3) 63 bytes {6} [rendered] 
    [0] ./page3.js 63 bytes {4} [built] 
chunk {5} 5.chunk.js 262 kB {4} [rendered] 
    + 2 hidden modules 
chunk {6} commons.chunk.js (commons.chunk.js) 0 bytes [rendered] 

私はそれが間違っているのだろうか？それとも私は何かを誤解していますか？

Answer 1

不安定な夜の後、私は解決策を見つけました。 require()はsplit pointです。私は仕事にCommonsChunkPlugin magicにしたい場合は、私はdefineページ必要があります。

page1.js：define(['jquery', 'lodash'], function($) { /* page 1 */ });

page2.js：define(['jquery', 'svgjs'], function($) { /* page 2 */ });

page3.js：それは私の場合はdefine(['jquery', 'scriptjs'], function($) { /* page 3 */ });

ですより良い移動jqueryvendorチャンクを明示的に定義します。