webpack method to extract public files from specified entry files

If you don't understand the use of CommonsChunkPlugin, it is really difficult to directly use splitChunks of webpack4. In order to better understand the use of splitChunks, you must give a question and practice your skills in order to gain something from it (the following questions do not consider actual application scenarios):

Extract public files from specified entry files

CommonsChunkPluginImplementation：
entry: {
    index:'./src/',
    index1:'./src/',
    index2:'./src/'
},
plugins: [
  new CommonsChunkPlugin({
    name:"common1",
    chunks:['index','index1','index2']
  })
]

Among them, index, index1 and index2 are packaged entry files.

Implementation of splitChunks:

optimization: {
    splitChunks: {
      chunks:"all",
      minSize: 0,
      cacheGroups: {
        common: {
          minChunks: 3,
          priority: -1,
          name:'common',
          chunks (chunk) {
            // exclude `my-excluded-chunk`
            return ['index','index1','index2'].includes();
          }
        }
      }
    }
  }

Under cacheGroups we define a common. Through the chunks function, specify the three entry files as: 'index','index1','index2'. At the same time, we also set minChunks to 3, indicating that the public files extracted from the three entry files should be referenced by at least three different entry files. So it is to extract the public file from the three entry files.

Extract the public part from two public files

Let me first talk about what this means:

• There are 6 public files a, b, c, d, e, f.
• Extract its common part x from a, b, c, and also extract the common part y from d, e, f.
• Extract the common part z from x and y.

The following is the processing under webpack3 and webpack4

CommonsChunkPlugin implementation:

new CommonsChunkPlugin({
  name:"common1",
  chunks:['index','index1','index2']
}),
new CommonsChunkPlugin({
  name:"common2",
  chunks:['app','app1','app2']
}),
new CommonsChunkPlugin({
  name:"common3",
  chunks:['common1','common2']
})

It is clear that first extract the public file ‘common1’ from 'index', 'index1', 'index2', and then extract the public file ‘common2’ from 'app', 'app1', 'app2'. Finally, the public file common3 is extracted from ‘common1’ and ‘common2’.

Implementation of splitChunks:

optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks:"all",
      minSize: 0,
      cacheGroups: {
        common3: {
         minChunks: 6,
         priority: 1,
         reuseExistingChunk: true
        },
        common2: {
          minChunks: 3,
          priority: -2,
          name:'common2',
          chunks (chunk) {
            // exclude `my-excluded-chunk`
            return ['app','app1','app2'].includes();
          }

        },
        common1: {
          priority: -1,
          name: 'common1',
          minChunks: 3,
          enforce: true,
          chunks (chunk) {
            return ['index','index1','index2'].includes();
          }
        }
      }
    }
  }

I didn't find the following method from the documentation: Extract the public file and then process it. So I used another method:

• First extract the public file from 6 files, namely common3 (common1 and common2 public files).
• Extract common1 from 'index','index1','index2'
• Extract common2 from 'app','app1','app2'

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.