Webpack 插件扫盲系列（二）webpack.DllPlugin 和 webpack.DllReferencePlugin

一、概念

DLLPlugin 和 DLLReferencePlugin用某种方法实现了拆分 bundles，同时还大大提升了构建的速度,将包含大量复用模块且不会频繁更新的库进行编译，只需要编译一次，编译完成后存在指定的文件中。在之后的构建过程中不会再对这些模块进行编译，而是直接使用 DllReferencePlugin 来引用动态链接库的代码。一般会对常用的第三方模块使用这种方式，例如 react、react-dom、lodash 等。只要这些模块不升级更新，这些动态链接库就不需要重新编译。故我们需要创建一个单独的webpack打包任务，单独先打包那些些复用模块且不会频繁更新的库，再在我们的打包流程中引用打包的dll.

二、创建webpack.dll.conf.js 单独打包dll

该打包只输出打包后的 _dll_xxx[hash].js和 xxx.manifest.json。

const webpack = require("webpack")
const path = require('path')
const CleanWebpaclPlugin = require('clean-webpack-plugin');
const resolve = (dir) => path.join(__dirname, '..', dir);

module.exports = {
   
  entry: {
   
    # 将 react、lodash等模块作为入口编译成动态链接库
    vendor: ['react', 'react-dom', 'react-router-dom', 'lodash']
  },
  output: {
   
    # 指定生成文件所在目录文件夹，
    # 将它们存放在了 src 文件夹下
    path: resolve('public'),
    # 指定文件名
    library: '_dll_[name]',
    # 存放动态链接库的全局变量名称，例如对应 lodash 来说就是 lodash_dll_lib
    # 这个名称需要与 DllPlugin 插件中的 name 属性值对应起来
    filename: 'dll/_dll_[name].[hash].js'
  },
  plugins: [
    new CleanWebpaclPlugin(['dll'], {
   
        root: resolve('public')
    }),
    new webpack