demo21源码地址
    本节使用demo15的代码未基础
    首先安装一个lodash插件npm i lodash，并在app.js文件中写入

    1. import _ from 'lodash'
    2. consolo.log(_.join(['hello','world'],'-'))

    在build文件夹下新建webpack.dll.js文件

    1. const path = require('path')
    3. module.exports = {
    4.     mode: 'production',
    5.   entry: {
    6.       vendors: ['lodash','jquery']
    7.   },
    8.   output: {
    9.       filename: '[name].dll.js',
    10.     path: path.resolve(__dirname, './dll'),
    11.     libray: '[name]'
    12.   }
    13. }

    这里使用library,忘记的朋友们可以看下十六小节，自定义函数库的内容，定义了library就相当于挂载了这个全局变量，只要在控制台输入全局变量的名称就可以显示里面的内容，比如这里的是library: '[name]' ，对应的那么就是我们在entry里定义的vendors

    在package.json中新增一条命令

    1. {
    2.   "scripts": {
    3.     "dev": "webpack-dev-server --open --config ./build/webpack.dev.conf.js",
    4.     "build": "webpack --config ./build/webpack.prod.conf.js",
    5.     "build:dll": "webpack --config ./build/webpack.dll.js"
    6.   }
    7. }

    运行 npm run build:dll，会生成 dll 文件夹，并且文件为 vendors.dll.js
    打开文件可以发现 lodash 已经被打包到了 dll 文件中
    那我们要如何使用这个vendors.dll.js文件呢？
    我们需要安装一个插件：

    npm i add-asset-html-webpack-plugin

    它会将我们打包后的 dll.js 文件注入到我们生成的 index.html 中
    在 webpack.base.conf.js 文件中引入

    1. const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
    3. module.exports = {
    4.   plugins: [
    5.     new AddAssetHtmlWebpackPlugin({
    6.       filepath: path.resolve(__dirname, '../dll/vendors.dll.js') // 对应的 dll 文件路径
    7.     })
    8.   ]
    9. }

    使用 npm run dev 来打开网页
    现在我们已经把第三方模块单独打包成了 dll 文件，并使用
    但是现在使用第三方模块的时候，要用 dll 文件，而不是使用 /node_modules/ 中的库，继续来修改 webpack.dll.js 配置

    1. const path = require('path')
    2. const webpack = require('webpack')
    4. module.exports = {
    5.   mode: 'production',
    6.   entry: {
    7.     vendors: ['lodash', 'jquery']
    8.   },
    9.   output: {
    10.     filename: '[name].dll.js',
    11.     path: path.resolve(__dirname, '../dll'),
    12.     library: '[name]'
    13.   },
    14.   plugins: [
    15.     new webpack.DllPlugin({
    16.       name: '[name]',
    17.       // 用这个插件来分析打包后的这个库，把库里的第三方映射关系放在了这个 json 的文件下，这个文件在 dll 目录下
    18.       path: path.resolve(__dirname, '../dll/[name].manifest.json')
    19.     })
    20.   ]
    21. }

    保存后重新打包 dll，npm run build:dll
    修改 webpack.base.conf.js 文件，添加 webpack.DllReferencePlugin 插件