在項目開發(fā)中總會使用第三方庫，這些第三方庫一般是不會改變的，所以不需要每次進(jìn)行編譯，webpack可以把這部分公用的代碼單獨打包出來
1利用DllPlugin打包出一個公用的Dll文件,除了Dll文件，DllPlugin還會生成一個manifest.json文件作為公用代碼索引供DllReferencePlugin使用
2在業(yè)務(wù)代碼的webpack中配置好DllReferencePlugin,達(dá)到Dll文件與業(yè)務(wù)代碼關(guān)聯(lián)
3在頁面文件中，先載入Dll文件，然后載入業(yè)務(wù)代碼文件
先建立一個webpack.dll.config.js文件

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

module.exports= {
    entry: {
        vendors:['react','react-dom'] //需要公用的第三方庫
    },
    output: {
        path: path.resolve(__dirname, './dist'), //文件輸出的路徑
        filename: "[name].dll.js",
        library: "[name]" //生成一個變量名供dllreference調(diào)用要與dllPlugin.name保持一致
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.resolve(__dirname,'./dist/manifest.json'),//生成manifest.json文件的路徑
            name:"[name]",
            context:__dirname
        })
    ]
}

webpack --config ./webpack.dll.config.js進(jìn)行編譯
這時候文件會生成一個dist文件里面會有一個vendors.dll.js和manifest.json文件
在業(yè)務(wù)的webpack文件中配置DllReferencePlugin

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

module.exports={
    entry: {
        index:'./src/index.jsx'
    },
    output: {
        path:path.resolve(__dirname,'./dist'),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                use:[
                    'style-loader', 'css-loader'
                ]
            },
            {
                test:/\.(js|jsx)$/,
                exclude:/(node_modules|bower_components)/,
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:['env','react']
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context:__dirname,
            manifest:require('./dist/manifest.json'),//通過require引入manifest.json文件
            name:'vendors'//引入dll文件的變量名
        })
    ]
}

這時候進(jìn)行編譯你會發(fā)現(xiàn)我們的公用代碼是delegated （委派）進(jìn)去的，而不是直接打包進(jìn)bundle.js文件中