minChunks、CommonsChunkPlugin在第三方库中抽离出自定义的公共组件

webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const packagejson = require('./package.json');

module.exports = {
  // 入口文件
  entry: {
    // 多入口
    'main1': './src/main1.js',
    'main2': './src/main2.js',
    // package.json中的dependencies第三方插件
    'vendor': Object.keys(packagejson.dependencies)
  },
  // 出口文件
  output: {
    path: path.resolve('./dist'), //相对转绝对
    filename: '[name].js'
  },
  // 文件监视改动，自动产出build.js
  watch: true,
  plugins: [
    // 第三方插件抽离
    new webpack.optimize.CommonsChunkPlugin({
      // 自定义名称
      // runtime抽离webpack的运行文件
      name: ['vendor', 'runtime'],
      filename: '[name].js',
      // 用来在第三方库中抽离出自定义的公共组件，Infinity:只有当入口文件 (entry chunks) >=3 才生效
      minChunks: Infinity  
    }),
    new webpack.optimize.CommonsChunkPlugin({
      // 自定义名称
      name: 'common',
      filename: '[name].js',
      // 从main1.js、main2.js中抽离出common chunk
      chunks: ['main1', 'main2']
    })
  ]
}

终端执行npm run dev，生成dist文件夹如下：

自定义的公共组件common.js被分离出来。