至此优化的问题基本已经解决了，但是在处理过程中需要进行复制粘贴，还要对index.html文件进行操作，如果是对于项目不熟悉的人来进行开发项目的话，就会出现一些小的问题，所以我决定继续往下研究一下：
思路还是上面的思路，我们下面需要进行的操作呢就是对与之前的处理进行优化，通过配置文件，和命令去实现我们想要的效果
首先我们将上面 webpack.dll.config 文件里面的entry配置项拿出来，在config文件夹下新建一个dll.js
module.exports = { entry: { // 这里的依赖顺序必须是：对象从上往下依赖，数组从右到左依赖（如果互不依赖的可以忽略顺序） ui: ['iview', 'element-ui'], tool: ['lodash', 'jquery', 'axios', 'vue-fullcalendar'], vue: ['vue', 'vuex', 'vue-router', 'vue-cookie'], xlsx: ['xlsx'], echarts: ['echarts'], other: ['handsontable'], }, outFile: '../static/dll' };
这里面其实就是我们一开始写的entry的配置项，根据这个js去打包的文件有一个顺序，就是我总结的这个：
这里的依赖顺序必须是：对象从上往下依赖，数组从右到左依赖（如果互不依赖的可以忽略顺序）
如果不按照这个顺序去写的话，会出现依赖错误的问题！！！
然后在output里面再进行一下配置：
output: { path: path.join(__dirname, dllConfig.outFile), // 打包后文件输出的位置 filename: '[name].dll.[chunkhash].js', library: '[name]_library' // 主要是给DllPlugin中的name使用， // 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。 },
这样在执行 webpack -p --progress --config build/webpack.dll.conf.js 指令的时候会生成如下：
是不是看到文件后面的hash就一脸懵逼，这怎么办，我们没有办法去进行复制粘贴了！！（我们的目的不就是不进行复制粘贴吗 正经脸-_-）
要实现命令操作之后不进行复制粘贴操作就需要使用webpack的HtmlWebpackPlugin插件
在plugins里面配置一下HtmlWebpackPlugin
new HtmlWebpackPlugin({ filename: path.join(__dirname, '../', config.dev.index), template: 'index.ejs', inject: false }),
然后在根目录添加一个index.ejs模版（ejsGitHub地址 ）， index.ejs中代码如下:
<body> <div></div> <!-- dll files will be auto injected --> <% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script type="text/javascript" src="/<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script> <% } %> <!-- built files will be auto injected --> </body>
最后需要在config文件夹下的index.js进行一下修改： 在dev中添加： index: 'index.html',
项目在执行dev指令或者build指令之前需要先执行： webpack -p --progress --config build/webpack.dll.conf.js 在dll指令结束后 执行其他操作就可以完美的玩耍了:blush:
总结
至此代码打包优化的整个过程就基本结束了，测试一下，15分钟左右就可以完成打包，比之前打包快了将近10分钟，可以说是非常成功的一次尝试！！
您可能感兴趣的文章: