Webpack CommonsChunkPlugin не работает, как ожидалось

Question

Как docs говорит:

Если запись глыба имеет некоторые модули в общем, есть классный плагин для этого. 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 ll содержат jquery код, но ist нет. commons.chunk.js содержит только исходные вещи в веб-папке. И каждый фрагмент страницы содержит код 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 */ });

В моем случае это лучше двигаться jquery до явно заданного vendor кусок.