cmc-web/build/webpack.dll.config.js

/*
 * @Author: Haijun Zhang
 * @Date: 2022-11-08 15:34:47
 * @LastEditTime: 2022-11-15 17:51:22
 * @LastEditors: Haijun Zhang
 * @Description:
 * @FilePath: \cmc-web\build\webpack.dll.config.js
 */
// webpack.dll.conf.js

// 引入依赖
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 清空文件用的
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // 压缩代码用的

module.exports = {
  mode: 'production',
  entry: {
    vendor: ['vue-router', 'vuex', '@vue/composition-api', 'axios', 'qs', 'js-cookie', 'dayjs', 'crypto-js', 'cmp-socket', 'vuedraggable'],
    element: ['cmp-element', 'cmp-echarts']
  },
  // 出口
  output: {
    filename: 'dll.[name].js', // 其中[name]就是entry中的dll模块名字，因此filename就是dll.vue.js
    path: path.resolve(__dirname, '../dll'), // 输出打包的依赖文件到dll/js文件夹中
    library: '[name]_library' // 暴露出的全局变量名，用于给 manifest 映射
  },
  plugins: [
    // 重新打包时，清除之前打包的dll文件
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, '../dll/*')] // ** 代表文件夹， * 代表文件
    }),
    // 生成 manifest.json 描述动态链接库包含了哪些内容
    new webpack.DllPlugin({
      // 暴露出的dll的函数名；此处需要和 output.library 的值一致
      // 输出的manifest.json中的name值
      name: '[name]_library',
      context: path.resolve(__dirname, '../'),
      // path 指定manifest.json文件的输出路径
      path: path.resolve(__dirname, '../dll/[name]-manifest.json') // DllReferencePlugin使用该json文件来做映射依赖。（这个文件会告诉我们的哪些文件已经提取打包好了）
    }),
    new BundleAnalyzerPlugin() // 压缩
  ]
}