Webpack Commonschunkplugin Understanding

Recently read the Webpack document, read the Commonschunkplugin this plugin, deeply impressed with Webpack strong, but also produced some of their own doubts.

First of all, commonschunkplugin this plugin is used to extract common code, by extracting the public module, only once when the page is loaded, to improve the load efficiency of the application.

By the way, chunk is actually the meaning of the code block, it may be one or more modules, is usually a JS file.

Commonschunkplugin has a Chinese translation of the document, but the feeling is not very fluent, the English document reading also have some doubts, such as minchunks in the end is what to use, how to use? What is chunks? First, post the document.

1 {2Name:string,//or3 names:string[],4   //The chunk name of the Commons chunk. An existing chunk can is selected by passing a name of a existing chunk.5   //If an array of strings are passed this was equal to invoking the plugin multiple times for each chunk name.6   //If omitted and ' Options.async ' or ' Options.children ' is set all chunks be used, otherwise ' options.filename '7   //is used as chunk name.8   //When using the ' Options.async ' to the create common chunks from the other async chunks You must specify an entry-point9   //chunk name Here instead of omitting the ' option.name '.Ten  One filename:string, A   //The filename template for the Commons chunk. Can contain the same placeholders as ' output.filename '. -   //If omitted the original filename is not modified (usually ' output.filename ' or ' output.chunkfilename '). -   //This option isn't permitted if you ' re using ' Options.async ' as well, see below for more details. the  -minchunks:number| infinity|function(module, Count)Boolean, -   //The minimum number of chunks which need to contain a module before it's moved into the Commons chunk. -   //The number must is greater than or equal 2 and lower than or equal to the number of chunks. +   //passing ' Infinity ' just creates the Commons chunk, but moves no modules into it. -   //by providing a ' function ' You can add custom logic. (Defaults to the number of chunks) +  A chunks:string[], at   //Select The source chunks by chunk names. The chunk must is a child of the Commons chunk. -   //If omitted all entry chunks is selected. -  -Children:Boolean, -   //If ' true ' all children of the Commons chunk is selected -  inAsyncBoolean|String, -   //If ' true ' a new async Commons chunk is created as the child of ' options.name ' and sibling of ' options.chunks '. to   //It's loaded in parallel with ' options.chunks '. +   //Instead of using ' option.filename ', it is possible to change the name of the output file by providing -   //The desired string here instead of ' true '. the  * Minsize:number, $   //Minimum size of all common module before a commons chunk is created.Panax Notoginseng}

• name and names:Chunk, if the chunk is already defined in entry, the chunk will be extracted directly; An empty chunk is generated to fetch the common code for all other chunk.

• FileName: You can specify the file name of the extracted public code, and you can use the placeholder for the file name in the output configuration item. When undefined, use name as the file name.

• chunks: You can specify the source chunks to extract the public module, the specified chunk must be a submodule of the public chunk, and if not specified, use all entry that are defined in the chunk.

• minchunks: Before a module is extracted to a public chunk, it must be contained by a minimum of minchunks chunk. (in layman's words, a module must be referenced by at least minchunks modules to be extracted to a public module.) ）

The number must be no less than 2 or less than the number of chunks. The default value is equal to the number of chunks.

If infinity is specified, a public chunk is created, but no modules are included, internally are some Webpack generated runtime code and chunk itself contains modules, if chunk exists.

Users can also customize their own logic to generate code.

Let's look at a simple example.

1Module.exports = {2 entry: {3App: './src/index.js ',4 vender: [5' Lodash ',6' Otherlib '7         ]8     },9 plugins: [Ten          New  webpack.optimize.CommonsChunkPlugin ({  One             name: ' Vender ' A  }) -     ], - output: { theFileName: ' [name]. [Chunkhash].js ',// use hash to name the file and implement the file caching function. When the contents of the file change, the filename changes.  -Path:path.resolve (__dirname, ' dist ')) -     } -};

The above code defines two portals, apps and vender (Common library), plugins using Commonschunkplugin extract vender.

Vender is the public chunk that we extract, which is usually not modified, so the file name should be consistent after each compilation. However, when we try to modify the portal file Index.js will find that the vender filename will change.

Why? As mentioned above, the internal runtime code changes as each compilation causes vender module.id to change.

There are several solutions to the solution:

1. Using the Namedmodulesplugin plugin, use the file path instead of the default digital ID as the module identifier.

2. Using the Hashedmoduleidsplugin plugin, use the hash value of the relative path as the module identifier. Recommended for use in production environments.

3. Extract the code from the runtime section to a separate file, as shown in the code below.

1Module.exports = {2 entry: {3App: './src/index.js ',4 vender: [5' Lodash '6         ]7     },8 plugins: [9         NewWebpack.optimize.CommonsChunkPlugin ({TenName: ' Vender ', One minchunks:infinity A         }), -          New  webpack.optimize.CommonsChunkPlugin ({  -             name: ' Manifest ',  the             chunks: [' vender ']  -  }) -     ], - output: { +FileName: ' [name]. [Chunkhash].js ', -Path:path.resolve (__dirname, ' dist ')) +     } A};

Commonschunkplugin was used again in the code, and the runtime code named manifest was extracted from the vender.

Please correct me if you are not finished.

Webpack Commonschunkplugin Understanding