星散库代码Code Splitting – Libraries

这个在webpack2.x中文网已存在，点击这里

让我们想一个简朴的运用——momentjs，他是一个事宜格式化的库。
装置moment.

npm install --save moment

index文件将挪用moment作为依靠来纪录如今时刻。

index.js

var moment = require('moment');
console.log(moment().format());

我们能够用下面的设置来打包运用。

webpack.config.js

module.exports = function(env) {
    return {
        entry: './index.js',
        output: {
            filename: '[chunkhash].[name].js`,
            path: './dist'
        }
    }
}

在你的运用中运转webpack，然后搜检打包的效果，你会发明moment和index.js被打包合并到bundle.js中了。

关于运用来讲这不是我们想要的。假如index.js代码放生了变化，全部bundle.js须要从新打包一遍。浏览器须要从新下载打包后的文件，纵然文件的绝大部分都没有变化。

mutilple Entries 多个文件进口。

星散moment而且以vendor来定名新的进口能够紧张当前的题目。

webpack.config.js webpack设置

module.exports = function(env) {
    return {
        entry: {
            main: './index.js',
            vendor: 'moment'
        },
        output: {
            filename: '[chunkhash].[name].js`,
            path: './dist'
        }
    }
}

运转webpack，你会发明两个被打包的文件被输出。假如你搜检的话会发明，moment在这两个文件中都存在。

CommonsChunkPlugin

这是一个非常复杂的插件。他的主要功用从差别的bundle文件中摘除雷同的模块，然后绑定到一个bundle文件中。
假如一个大众bundle文件不存在，那末就会建立一个。

我们能够下修正设置文件来运用CommonsChunkPlugin插件。

var webpack = require('webpack');
module.exports = function(env) {
    return {
        entry: {
            main: './index.js',
            vendor: 'moment'
        },v
        output: {
            filename: '[chunkhash].[name].js`,
            path: './dist'
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor' // Specify the common bundle's name.
            })
        ]
    }
}

如今运转webpack,绑定的搜检效果是moment只是被绑定到vendor这个绑定文件中。

Manifest file（证明文件）

应当注意到，假如我们转变运用的代码，然后运转webapck，将会发明vendor绑定文件的也发生了变化。
纵然vendor和main两个绑定的问价是离开实行绑定的，一个变化另一个没有变化会致使两个文件的hash
都发生变化。这说明我们照样没有取得浏览器缓存文件的优点，由于文件的hash致使名字都发生了变化。因而他们都邑从新下载。

这类题目会涌现每次buil的时刻。webpack天生一些webpack运转码，它协助webpack做它的事。当只要一个
bundle绑定文件时，运转码在他的内部。但是有多个bundle被天生时，他在common build中，也就是vendor文件中。

为了处理这个题目，我们须要摘出来一个文件特地寄存运转码，这个文件是mainifest file。经由过程每次建立一个其他的文件–manifest，在它的前面是一大堆我们须要缓存的文件，在vendor中。

webpack.config.js

var webpack = require('webpack');
module.exports = function(env) {
    return {
        entry: {
            main: './index.js',
            vendor: 'moment'
        },
        output: {
            filename: '[chunkhash].[name].js`,
            path: './dist'
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendor', 'manifest'] // Specify the common bundle's name.
            })
        ]
    }
};

经由过程上面的设置，我们能够看到三个bundle被天生，vendor,main以及manifestbundle。