# Define the concept

  • Each entry file is called an Entry chunk.
  • Each entry file is loaded asynchronously also called chunk(Children Chunk)
  • The commonChunkPlugin is also called the Common Chunk.

# Usage Scenarios

  1. Multi-entry file, need to extract the announcement part of the time.
  2. Single-entry files, but because the route loads asynchronously against multiple sub-chunks, extract ions common to each child.
  3. Separate all dependencies under node_modules into separate parts.
  4. Mixed use requires both the separation of third-party dependencies and the separation of common parts.

Implement part of the project structure

 // a.js
 import { common1 } from './common'
 import $ from 'jquery';
 console.log(common1, 'a')

  //b.js
  import { common1 } from './common'
  import $ from 'jquery';
  console.log(common1, 'b')

  //common.js
  export const common1 = 'common1'
  export const common2 = 'common2'
Copy the code

The result of packaging without using plug-ins is as follows:

Case 1 extracts multiple entries into common.js

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "common",
      filename: "common.js"})]Copy the code

The result is as follows:

Case 2 extracts common.js from Children Chunk

// single entry file main.js const Component1 =function(resolve) {
  return require(['./a'], resolve)
}
const component2 = function(resolve) {
  return require(['./b'], resolve)
}
console.log(component1, component2, $, 'a')
Copy the code

If commonChunk is not used, the result is as follows:

/ / use commonChunk configure plugins as follows: [new webpack.optimize.Com monsChunkPlugin ({children:true,
      async: 'children-async',
      name: ['main'"})"Copy the code

// The result is as follows

Case 3 node_modules All three dependencies are removed to vendor.js

/ / webpack configuration... entry : { main:'./src/main.js',
    vendor: ['jquery']}... . new webpack.optimize.CommonsChunkPlugin({ name:'vendor'// Merge all public components of the entry file into the vendor module filename:'[name].js'})...Copy the code

The command output is as follows:

Case 4 Case 2 and Case 3 use vendor.js as a three-party dependent extraction, and 0.js as a children common part extraction

. plugins: [ new webpack.optimize.CommonsChunkPlugin({ name:'vendor',
      filename: '[name].js'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      children: true,
      async: 'children-async',
      name: ['main']})].Copy the code

The result is as follows:

Github source code download

# A few points to note

  • Name: If the name of both entry and CommonsChunkPlugin has vendor, merge the extracted common parts into the vendor entry file. If there is no vendor in the entry, the entry file is extracted and placed in vendor.
  • MinChunks: Can be numbers, functions, or Infinity. Function: takes two arguments (module, count) and returns a Boolean value. You can do your own logic inside the function to determine whether a module should be extracted as A Commons chunk

    Infinity: used to separate custom common modules in third-party libraries only if entry chunks >= 3

  • Common.js can still be removed after commonChunk by resetting name: in the new CommonsChunkPlugin
  • The above method is only used with webPack 4 below