问题描述：

在多入口文件的情况下，打包策略如何配置，能提高页面加载资源的速度。

像达到的目标

根据不同模块生成不同的vendor，比如header模块生成header.vendor.js。

现采用的策略：

尝试了一下多入口文件下的code splitting。
发现的现象是：
如果是多入口的情况下比如header.js与main.js
webpack会将main.js与header.js都有的依赖打成一个vendor，header这个入口文件独有的又打成另一个vendor。

import * as _ from 'lodash';
import jquery from 'jquery';
import moment from 'moment';

console.log(_.join(['a', 'b', 'c'], '~'))

header.js

import * as _ from 'lodash';


console.log(_.join(['a', 'b', 'c'], '~'))

index.js

附上我的打包策略：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');
var merge = require('webpack-merge');

module.exports = {
  entry: {
    main: './src/index.js',
    header: './src/header.js'
  },
  module: {
    rules: [{
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.jpg$/,
        use: [{
          //placeholder
          loader: 'url-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'images',
            limit: 8192 //limit to 8kb
          }
        }]
      },
      {
        test: /\.(eot|woff2|woff|ttf|svg)$/,
        use: [{
          //placeholder
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts',
          }
        }]
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              // 0 => no loaders (default);
              // 1 => postcss-loader;
              // 2 => postcss-loader, sass-loader,
              //modules: true
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, 'dist'),
    publicPath: './'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 6,
      maxInitialRequests: 4,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename: "vendors[name].js"
        },
        default: {
          priority: -20,
          filename: "common[name].js",
          reuseExistingChunk: true
        }
      }
    }
  },
  plugins: [new HtmlWebpackPlugin({
    template: 'src/index.html',
  }), new CleanWebpackPlugin({
    cleanAfterEveryBuildPatterns: ['bundle']
  })]
}