As docs says:
If your entry chunks have some modules in common, there is a cool plugin for this. The CommonsChunkPlugin identifies common modules and put them into a commons chunk.
My 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 */ });
What I expect from webpack --progress --colors --display-chunks
is the that commons.chunk.js
will contain jquery
code, but ist not. commons.chunk.js
contains only initial webpack stuff. And each page chunk contains jquery
code.
Webpack output:
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]
Am I doing it wrong? Or I misunderstand something?
So after restless night I found solution. require()
is split point . And if I want to CommonsChunkPlugin magic
to work, I should define
pages:
page1.js: define(['jquery', 'lodash'], function($) { /* page 1 */ });
page2.js: define(['jquery', 'svgjs'], function($) { /* page 2 */ });
page3.js: define(['jquery', 'scriptjs'], function($) { /* page 3 */ });
In my case it is better move jquery
to explicitly defined vendor chunk.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.