正如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
将包含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]
我做错了吗?或者我误解了什么?
答案 0 :(得分:2)
所以经过不安的夜晚,我找到了解决办法。 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块。