-
Notifications
You must be signed in to change notification settings - Fork 0
WebPack common chunk and vendor chunk
原文
另一篇 multiple-commons-chunks
This example shows how to create an explicit vendor chunk as well as a common chunk for code shared among entry points. In this example, we have 3 entry points: pageA , pageB , and pageC . Those entry points share some of the same utility modules, but not others. This configuration will pull out any modules common to at least 2 bundles and place it in the common bundle instead, all while keeping the specified vendor libraries in their own bundle by themselves.
To better understand, here are the entry points and which utility modules they depend on:
• pageA
◦ utility1
◦ utility2
• pageB
◦ utility2
◦ utility3
• pageC
◦ utility2
◦ utility3
Given this configuration, webpack will produce the following bundles:
• vendor
◦ webpack runtime
◦ vendor1
◦ vendor2
• common
◦ utility2
◦ utility3
• pageA
◦ pageA
◦ utility1
• pageB
◦ pageB
• pageC
◦ pageC
With this bundle configuration, you would load your third party libraries, then your common application code, then your page-specific application code.
webpack.config.js
var path = require("path");
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
vendor: ["./vendor1", "./vendor2"],
pageA: "./pageA",
pageB: "./pageB",
pageC: "./pageC"
// older versions of webpack may require an empty entry point declaration here
// common: []
},
output: {
path: path.join(__dirname, "js"),
filename: "[name].js"
},
plugins: [
new CommonsChunkPlugin({
// The order of this array matters
names: ["common", "vendor"],
minChunks: 2
})
]
};
tell me how get back to sunshine