webpack dllplugin

在项目开发中总会使用第三方库，这些第三方库一般是不会改变的，所以不需要每次进行编译，webpack可以把这部分公用的代码单独打包出来
1利用DllPlugin打包出一个公用的Dll文件,除了Dll文件，DllPlugin还会生成一个manifest.json文件作为公用代码索引供DllReferencePlugin使用
2在业务代码的webpack中配置好DllReferencePlugin,达到Dll文件与业务代码关联
3在页面文件中，先载入Dll文件，然后载入业务代码文件
先建立一个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调用要与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进行编译
这时候文件会生成一个dist文件里面会有一个vendors.dll.js和manifest.json文件
在业务的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文件的变量名
        })
    ]
}

这时候进行编译你会发现我们的公用代码是delegated （委派）进去的，而不是直接打包进bundle.js文件中