WebPack common chunk and vendor chunk - ythy/blog GitHub Wiki

εŽŸζ–‡
另一篇 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
		})
	]
};