[英]Webpack CommonsChunkPlugin not works as expected
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.
CommonsChunkPlugin 识别公共模块并将它们放入公共块中。
My webpack.config.js:我的 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 */ });
page1.js:
require(['jquery', 'lodash'], function($) { /* page 1 */ });
page2.js: require(['jquery', 'svgjs'], function($) { /* page 2 */ });
page2.js:
require(['jquery', 'svgjs'], function($) { /* page 2 */ });
page3.js: require(['jquery', 'scriptjs'], function($) { /* page 3 */ });
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.我对
webpack --progress --colors --display-chunks
期望是commons.chunk.js
将包含jquery
代码,但不是。 commons.chunk.js
contains only initial webpack stuff. commons.chunk.js
只包含初始的 webpack 内容。 And each page chunk contains jquery
code.每个页面块都包含
jquery
代码。
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 . require()
是 分割点。 And if I want to CommonsChunkPlugin magic
to work, I should define
pages:如果我想让
CommonsChunkPlugin magic
起作用,我应该define
页面:
page1.js: define(['jquery', 'lodash'], function($) { /* page 1 */ });
page1.js:
define(['jquery', 'lodash'], function($) { /* page 1 */ });
page2.js: define(['jquery', 'svgjs'], function($) { /* page 2 */ });
page2.js:
define(['jquery', 'svgjs'], function($) { /* page 2 */ });
page3.js: define(['jquery', 'scriptjs'], function($) { /* page 3 */ });
page3.js:
define(['jquery', 'scriptjs'], function($) { /* page 3 */ });
In my case it is better move jquery
to explicitly defined vendor chunk.在我的情况下,最好将
jquery
移动到明确定义的供应商块。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.