webpack打包优化

因为项目一直在加工能，每次打包之后都很慢，所以就要解决这个问题，我采用的方法如下,

一、使用DllPlugin 和DllReferencePlugin

       这两个插件我们不用安装，是webpack支持的，我们可以直接来使用，主要思想就是我们将依赖单独抽离出来，单独打包，然后将打包后的js文件引入到html中，利用manifest.json（生成）来映射。接下来说步骤

（1）建一个config.dll.js文件，文件内容如下

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

const lib = {
    entry: {
        "lib": [
            'react-hot-loader','react', 'react-dom', 'redux', 'react-router',             
            'antd'
        ],
    },
    output: {
        // 将会生成./ddl/lib.js文件
        path: path.join(__dirname,'../build/static/, "ddl"),
        filename: '[name].js',
        library: '[name]',
    },
    
    plugins: [
        new webpack.DllPlugin({
            context: __dirname,
            name: '[name]',
            path: path.join(__dirname,'../build/static/ddl/manifest.json'),
        }),
    ],
    module: {
        loaders:  [
            {
                test: /\.json$/,
                loaders: ['json-loader']
            }
        ]
    }
};
 module.exports = lib;

这个文件和webpack的规则一样，entry就是入口文件，outPut就是输出文件，这里是设置依赖打包后的路径和文件名，我们在入口文件上放上我们要抽离的依赖，plugin是配置生成manifest.json的生成路径。在这里我将依赖达成的包和manifest.json放在了同意目录ddl下面。我这里之所以要设置loaders，是因为一直保存，antd下的package.json不能解析。

创建完这个文件，我们可以执行webpack命令打包。也可以将打包命令写在package.json里面，这样比较方便。当我们执行完打包命令的时候，就会在我们指定的目录下面生成两个文件，一个是lib.js，这个是抽离出来的依赖，还有一个是manifest.json，这个是用来做映射用的，我们需要将此文件放在DllReferencePlugin，就是我们接下来要配置的

（2）配置完DllPlugin，再来配置DllReferencePlugin

new webpack.DllReferencePlugin({

        context: __dirname,

        manifest: require('./../build/static/ddl/manifest.json'),

    })

将这段代码放在webpack.config.js的plugin中，如果开发和线上是两个webpack文件的话，这段代码两个文件中国呢都要有，要注意写对manifest.json的路径。

（3）最后就是将我们抽离出来的依赖引入到html文件中，在这里，我们一定要注意路径，由于在服务器上，build文件夹是根目录，所以我们要将抽离出来lib.js放在build文件夹下。本地的话，我们的根目录根据devser.js中的contencBase，所以，我们设置路径的时候，要分别是开发还是正式。当然，如果根目录是一样的就无所谓了

到此为止，这两个插件就配好了，使用了这两个插件，不用打包依赖，打包速度将会提高很多