CommonsChunkPlugin多入口提取公共代码

webpack提取公共代码的作用：

减少代码冗余
提高加载速度

如下图：分别有A,B,C 3个模块，当加载图一时需要需要同时加载A和C模块，加载图二时，需要同时加载B,C模块
，而图3先将C提取出来，这样加载页面时，会减少重复加载和代码量

CommonsChunkPlugin相关介绍：

1.配置

{
    plugins: [
         new webpack.optimize.CommonsChunkPlugin(options)
    ]
}

options配置相关介绍（详细可参考中文档）

场景一，提取多入口文件的公共模块

1.demo目录结构

2.pageA.js内容

3.pageB.js内容

4.moduleA.js内容

5.subPageA.js

6.subPageB.js

7.webpack.config.js配置

var webpack = require('webpack')
var path = require('path')

module.exports = {
    entry: {
        // app: './src/app.js',
        'pageA': './src/pageA',
        'pageB': './src/pageB',
        // 'vendor': ['lodash']
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].chunk.js',
        publicPath: './dist/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    // options: {
                    //     presets: ['env']
                    // }
                },
                exclude: '/node_modules/',
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader/useable'
                    },
                    {
                        loader: 'css-loader'
                    } 
                ]
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
           name: 'common',
           minChunks: 2,
        //    children: true,
        //    async: true
        //    chunks: ['pageA', 'pageB']
        }),
        // new webpack.optimize.CommonsChunkPlugin({
        //     names: ['vendor', 'manifest'],
        //     minChunks: Infinity
        //  }),
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: 'manifest',
        //     minChunks: Infinity
        //  })
    ]
}

打包结果：

最终common.bundle.js会将入口pageA和pageB的公共模块moduleA，subPageB，subPageA提取出来

场景二，提取第三方依赖库

1.安装依赖lodash

npm i -D lodash

2.入口pageA，pageB全部引入第三方库lodash

import * as _ from 'lodash'

3.webpack.config.js配置

new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity
         })

打包后，第三方依赖lodash和webpack打包文件会打入到vendor.bundle.js中

场景三: 提取第三方依赖库和公共模块以及webpack打包文件

webpack.config.js配置：

 new webpack.optimize.CommonsChunkPlugin({
           name: 'common',
           minChunks: 2,
        //    children: true,
        //    async: true
           chunks: ['pageA', 'pageB']
        }),
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest'],
            minChunks: Infinity
        }),