build 文件夹中的 webpack.dll.config.js
1 const fs = require('fs') 2 const path = require('path') 3 const webpack = require('webpack') 4 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 代码压缩插件 5 6 7 // 你想要打包的模块的数组 8 let vendors = [ 9 [ 10 "echarts", 11 "wangeditor", 12 "element-ui", 13 "axios" 14 ], 15 [ 16 'vue/dist/vue.esm.js', 17 'vue-router', 18 'vuex' 19 ] 20 ] 21 22 module.exports = { 23 entry: { 24 // 多入口,单入口情况,只需写一个,key值自定义,value值为数组 25 xuAdmin0: vendors[0], 26 xuAdmin1: vendors[1] 27 }, 28 output: { 29 path: path.join(__dirname, "../static/dll"), // 生成的文件存放路径 30 filename: "[name].[chunkhash].dll.js", // 主要是给DllPlugin中的name使用,是给DllPlugin中的name使用 31 library: "[name]_[chunkhash]" // 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致(生成文件的映射关系,与下面DllPlugin中配置对应) 32 }, 33 plugins: [ 34 // Dllplugin 它可以大大缩短编译的时间,提升构建速度 35 36 /** 37 * 重点:这里引入的Dllplugin插件,该插件将生成一个manifest.json文件,该文件供webpack.config.js中加入的DllReferencePlugin使用, 38 * 使我们所编写的源文件能正确地访问到我们所需要的静态资源(运行时依赖包) 39 * 链接:https://www.jianshu.com/p/9c7815024bf5 40 */ 41 42 43 new webpack.DllPlugin({ 44 // path.join(path1,path2,path3.......) 将路径片段使用特定的分隔符(window:\)连接起来形成路径,并规范化生成的路径。若任意一个路径片段类型错误,会报错。 45 path: path.join(__dirname, "../dllManifest", "[name]-manifest.json"), // 会生成一个json文件,里面是关于dll.js的一些配置信息 46 name: "[name]_[chunkhash]", // 与上面output中配置对应 47 context: __dirname // 上下文环境路径(必填,为了与DllReferencePlugin存在与同一上下文中) 48 }), 49 50 // 压缩打包的文件 51 new UglifyJsPlugin({ 52 uglifyOptions: { 53 warnings: false 54 } 55 }), 56 ] 57 }