build 文件夹中的 webpack.dll.config.js

 

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 代码压缩插件


// 你想要打包的模块的数组
let vendors = [
  [
    "echarts",
    "wangeditor",
    "element-ui",
    "axios"
  ],
  [
    'vue/dist/vue.esm.js',
    'vue-router',
    'vuex'
  ]
]

module.exports = {
  entry: {
    // 多入口，单入口情况，只需写一个，key值自定义，value值为数组
    xuAdmin0: vendors[0],
    xuAdmin1: vendors[1]
  },
  output: {
    path: path.join(__dirname, "../static/dll"), // 生成的文件存放路径
    filename: "[name].[chunkhash].dll.js", // 主要是给DllPlugin中的name使用，是给DllPlugin中的name使用
    library: "[name]_[chunkhash]" // 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致（生成文件的映射关系，与下面DllPlugin中配置对应）
  },
  plugins: [
    // Dllplugin 它可以大大缩短编译的时间，提升构建速度

    /**
     *  重点：这里引入的Dllplugin插件，该插件将生成一个manifest.json文件，该文件供webpack.config.js中加入的DllReferencePlugin使用，
     *  使我们所编写的源文件能正确地访问到我们所需要的静态资源（运行时依赖包） 
     *  链接：https://www.jianshu.com/p/9c7815024bf5
     */


    new webpack.DllPlugin({
      // path.join(path1，path2，path3.......) 将路径片段使用特定的分隔符（window：\）连接起来形成路径，并规范化生成的路径。若任意一个路径片段类型错误，会报错。
      path: path.join(__dirname, "../dllManifest", "[name]-manifest.json"), // 会生成一个json文件，里面是关于dll.js的一些配置信息
      name: "[name]_[chunkhash]", // 与上面output中配置对应
      context: __dirname // 上下文环境路径（必填，为了与DllReferencePlugin存在与同一上下文中）
    }),

    // 压缩打包的文件
    new UglifyJsPlugin({
      uglifyOptions: {
        warnings: false
      }
    }),
  ]
}