[英]Webpack CommonsChunkPlugin not works as expected
正如 文檔所說:
如果你的入口塊有一些共同的模塊,有一個很酷的插件。 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
代碼。
網絡包輸出:
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]
我做錯了嗎? 還是我誤會了什么?
所以在不安的夜晚之后,我找到了解決方案。 require()
是 分割點。 如果我想讓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
移動到明確定義的供應商塊。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.