【webpack】DLL plugin原理分析

DLL plugin打包步骤

.dll为后缀的文件称为动态链接库，在一个动态链接库中可以包含给其他模块调用的函数和数据
把基础模块独立打包出来放到单独的动态链接库里
当需要导入的模块在动态链接库的时候，模块不能再次打包，而且从动态链接库里面获取

DllPlugin插件：用于打包一个个动态链接库
DllReferencePlugin:在配置文件中引入DllPlugin插件打包好的动态链接库

1、定义配置文件和命令

  "build:dll": "webpack --config build/webpack.dll.config.js --mode=development"

webpack.dll.config.js配置处理

/*
 * @description:
 * @author: steve.deng
 * @Date: 2020-09-25 12:53:31
 * @LastEditors: steve.deng
 * @LastEditTime: 2020-09-25 13:24:27
 */
const path = require("path");
// const DllPlugin = require("webpack/lib/DllPlugin");
const webpack = require('webpack')
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
module.exports = {
   
  entry: {
   
    vendor: ['vue/dist/vue.esm.js', 'element-ui/lib/element-ui.common.js', 'wangeditor', 'mathjs', 'echarts', 'html2canvas', 'vue-router', 'vuex']
  },
  output: {
   
    path: path.resolve(__dirname, "../static/js"),
    filename: "[name].dll.js", //vendor.dll.js
    library: "_dll_[name]_library",//库的名字叫 _dll_[name]_library 决定了 vendor.dll.js里面库的名字
    // vendor.dll.js中暴露出的全局变量名。
    // 主要是给DllPlug