由于vue文件中会含有CSS，所以vue-loader会提取出其中的css，交给其他loader处理，vue-loader-plugin会通过在vue文件后面加上查询字符串来告诉其他loader，针对这个文件要做处理。意味着什么呢？我们的vue-loader在处理文件的时候，通知其他loader处理，但是此时的loader配置已经被我们改写成了happypack，而vue又与happypack不兼容，最终导致了报错。很遗憾的告诉大家，vue-cli接入happypack--失败。
（注：这一部分主要是笔者在webpack优化过程中的探索，虽然最终不能让自己的webpack打包很好的优化，但是在这个探索的过程中，我们也可以学到很多~包括 vue-cli对配置对象的处理？如何调试普通文件nodejs代码？vue-loader中对vue文件的处理流程？vue-loader-plugin帮我们做了什么事？而这些都是要自己慢慢翻阅，慢慢踩坑去了解的~）
2.3使用dllplugin
和大多数的webpack优化教程一样，笔者也尝试了利用dllplugin进行优化，该插件的本质，是提取出我们常用的第三方模块，单独打成一个文件包，之后插入到我们的html页面中，这样我们以后每次打包，都不需要针对第三方模块进行处理，毕竟第三方模块动辄成千上万行。
流程介绍：
1、配置webpack.dll.js针对第三方库打包
2、vue.config.js中配置plugin
3、html中引入dll打包出来的js文件。（一般采用部署CDN的方式）
由于项目中有很多大型的第三方库，类似three、echart等，所以笔者进行了以下配置：（webpack.dll.js）
const webpack = require("webpack") const path = require("path") const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { vuebundle: [ 'vue', 'vue-router', 'vuex', ], utils:[ 'lodash', 'swiper', 'lottie-web', 'three', ], echarts:[ 'echarts/lib/echarts', "echarts/lib/chart/bar", "echarts/lib/chart/line", "echarts/lib/component/tooltip", "echarts/lib/component/title", "echarts/lib/component/legend", ] }, output: { path: path.resolve(__dirname, './static/'), filename: '[name].dll.js', library: '[name]_library' }, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname, 'build', '[name]-manifest.json'), name: '[name]_library' }) ] }
针对不同的库的大小进行划分，打了三个包，为啥不打成一个包？一个包那就太大了，你并不希望你的用户加载一个大型JS文件包而阻塞，影响页面性能。
接下里是vue.config.js的配置：
plugins: [ new webpack.ProvidePlugin({ $: "zepto", Zepto: "zepto", }), new DllReferencePlugin({ manifest: require('./build/echarts-manifest.json'), }), new DllReferencePlugin({ manifest: require('./build/utils-manifest.json'), }), new DllReferencePlugin({ manifest: require('./build/vuebundle-manifest.json'), }), new BundleAnalyzerPlugin(), ]
引入了DllPlugin。接下来配置HTML：
（由于笔者没将DLL打包出来的js文件上传到CDN，所以只能本地自己起个node服务器返回静态资源了）
<body> <div></div> <!-- built files will be auto injected --> <script type="text/javascript" src="https://localhost:3000/echarts.dll.js"></script> <script type="text/javascript" src="https://localhost:3000/utils.dll.js"></script> <script type="text/javascript" src="https://localhost:3000/vuebundle.dll.js"></script> </body>
然后npm run serve，开始页面调试和开发~
舒服~
优化结果：
由于少了大型第三方库，所以时间控制在了20s左右了。优化相对比较明显~
3、优化与探索总结
优化到这，基本就结束了。
webpack常见的优化方式，优化路径查找、设置缓存、happypack以及dllplugin，前两项vue-cli已经帮我们做了一些，而happypack由于不和vue兼容，导致无法接入，dllplugin通过单独提取第三方库，取得了明显优化。
当然，笔者也尝试剔除了一些项目中无用的代码，不过也是不痛不痒。
webpack优化方式总结：
1、优化模块查找路径
2、剔除不必要的无用的模块
3、设置缓存：缓存loader的执行结果(cacheDirectory/cache-loader)
4、设置多线程：HappyPack/thread-loader
5、dllplugin提取第三方库
当然，这是针对开发的优化，如果是针对部署上的优化呢？我们可以设置splitchunk、按需加载、部署CDN等，这里就不展开了。
最后
希望这篇文章能够大家有所收获~ webpack已经是前端仔必备技能了~有空大家钻研一下webpack的配置和原理，也是会有所收获的！谢谢观看~