项目越来越大，webpack的编译时间也越来越长。
通过Webpack DLLPlugin，可以助你大幅节省编译时间。

作用

预先编译好一些文件，节省最终编译时间。

用法

准备两个webpack.config.js
webpack.dll.config.js

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

module.exports = {
    entry: {
        react: ['react', 'react-dom', ... ] //要预先打包的库，已经存在于node_modules的
    },
    output: {
        filename: '[name}_123456.js', //打包好的JS文件名，要在HTML里直接加载的
        path: path.resolve(__dirname, 'dist'),  //对应上面filename的输出路径
        library: '[name]_ABCABC'  //随便填 要与DllPlugin里的name相同 z注意：这会暴露一个同名的全局变量 
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, 'dll', '[name].json'),  //webpack正式编译时读取配置用的JSON文件存放位置，不需要放到dist里，随便放个别的文件夹吧
            name: '[name]_ABCABC'  ////随便填 要与output.library相同 
        })
    ]
}

OK，然后编译DLL

webpack --config webpack.dll.config.js

正式编译的webpack.config.js

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

module.exports = {
    entry: path.resolve(__dirname, 'index'),
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new webpack.DllReferencePlugin({
            manifest: require("./dll/react.json")  //刚才的JSON
        })
    ]
}

正式编译

webpack

你会发现很多库显示

delegated ./node_modules/xxx/xxx.js from dll-reference XXXXXX 42 bytes {2} [built]

那么就是DLL引用成功了！

（正文完）