webpack优化vue2实战记录

+# 前言
日常工作中对webpack的使用太少，导致对一些编译打包优化相关的知识掌握不是很好。这里起了一个比较简单的vue项目，引入了几个第三方库(lodash,moment,lvzc-ui,element-ui,echarts)。期望通过webpack进行相关配置，能够优化打包速度，打包文件大小，首屏加载等。期望在手动配置的过程中，能够加深对webpack的理解。

第一步引入相关的库

npm i lvzc-ui   //lvzc-ui
npm i element-ui -S  // element ui
npm install moment --save    // moment.js
npm i --save lodash    // lodash
npm install echarts --save

运行scripts的serve命令，启动项目

可以看到，安装相关依赖之后，首次编译，compiled successfully in 16s。
ctrl + c下，重新启动下项目

可以看到这次编译只用了6s

首次构建

二次构建

打包完成后，打开dist文件夹下的index.html,发现报错

可以看出几个js,css文件的路径明显引用不对，
打开index.html代码

代码中的文件引用路径是没有问题的，但是我们用浏览器打开html后，路径发生了变化。这个是因为webpack打包的时候引入js时使用的是绝对路径导致的。我们需要修改webpack配置，改为相对路径

重新构建，打开index.html