使用 webpack 的各类插件提高你的开发效率

项目地址 vue-admin 欢迎 star

原文地址 www.ccode.live/lentoo/list…

前沿

近几个月，接手了一个老项目的重构规划，有多老呢？就是前端青铜时代的项目，一个先后端都在同一个锅里的项目、彻底没有使用任何的打包工具。

• 后台 php + YII 渲染页面
• 前端 html、css、js三剑客 加上 jQuery 复制粘贴就是干。

前端不够后端来凑。若是前端有一些需求不是很复杂的话，后端人员有时候也会兼顾的干一些前端的活。

后来我也开始负责这个项目的需求开发。作了几个需求后，对于我一个用习惯了ES6 加 webpack 模块化开发来讲，感受想吐血啊。

前端一个JS文件文件 少说 2000 行代码，多则 4-5000，代码多也就算了，关键是 写的代码没有任何规范，从文件开始就是

function funName () {}
function funName () {}
function funName () {}
...
// 或者是
$(function(){})
$(function(){})
$(function(){})
...
复制代码

这也就算了，关键是 一个 ajax的回调处理就有 ... 6-700 行代码

后来我看了下这么长的代码是要处理什么，结果一看 ... 原来一个for循环就占了600多行代码了。

算了，不想再说了，越说越心累。

毕竟拿人钱财，替人消灾。活仍是要干的。

1. 重构规划

这种项目最大的一个问题就是没有模块化开发，全部功能都写在一个js文件里。在开发了几个需求后、总结了有如下几个效率比较低的流程。

现存在的问题

1. 没有模块化开发，一个js文件几千行代码。代码复用率低。据说有些公司有 上万行代码的。求他们的心理阴影面积
2. PHP的各类模板语法，前端人员表示看不懂
3. 全部资源文件都是手动添加版本号
4. 精灵图须要手动合成 （这个最坑，效率特别低）
5. 图片压缩也是手动压缩
6. 控制台各类console.log的输出
7. ...

2. 接入模块化开发

考虑到目前团队的前端水平不是很高，因此使用 容易上手的 vue，而后使用 vue-cli3搭建一个 vue 项目，而后在进行一些配置以兼容现有项目，这些配置根据项目的不一样，也是不一样的，因此这里不展开细说。

其实使用 vue-cli3搭建起来的项目，已经帮咱们解决了大部分的问题。

1. 模块化的开发，vue 自己支持模块化开发
2. 资源文件都是手动添加版本号，使用webpack打包后的文件名会有 hash值。因此也解决了版本号的问题。

因此下面咱们来解决 vue-cli3没有帮咱们解决的问题

3. 图片压缩

在未接入 webpack 图片压缩以前，咱们都是使用 某个在线图片压缩网站，将图片丢进去，而后生成一个压缩后的图片来使用。 若是只有一两张图片还好说，若是有不少张图片，这种方法效率确定是不高的。

为了不不加班，必需要自动化。解放本身双手。

• 安装所须要的库

npm install img-loader imagemin imagemin-jpegtran imagemin-pngquant --save-dev
复制代码

• 在vue.config.js中配置

而后看看打包后的效果 npm run build

• 未压缩的图片 图片大小 622kb

• 压缩后的图片 图片大小 351kb

基本上看不出来差异。

注意：尽可能在 production 环境在压缩，在 dev 环境下不必压缩，影响打包速度。

4. 精灵图

在未接入 webpack 自动合成精灵图以前，咱们都是使用 某个在线合成精灵图网站，将一堆小图片丢进去，而后本身测量 background-position 来定位背景图。遇到多个图片大小不同的时候。 background-position的计算更是麻烦。

4.1 精灵图自动合成

• 安装依赖

npm install postcss-sprites --save-dev

• 在 postcss.config.js 中添加配置

而后在代码中，直接引用图片便可

4.1 精灵图分组

若是引用的小图片不少，最终会致使生成的精灵图很大。这时候就须要将精灵图进行分组了。相同模块的精灵图合成一张。同理

• 修改 postcss.config.js 的配置，添加 groupBy 属性

若是须要分组，只需在 assets/sprites 新建一个目录，该目录中的图片会单独的合成一张精灵图

5. 使用 vw,vh 自适应

以前项目都是使用 px 做为像素单位的，而且设计稿的尺寸是 1920x938.

在 1920*1080的屏幕上看是正常的，可是有些客户的是笔记本电脑，使用笔记本电脑看的话就太大了。没有作自适应。

若是要一个一个的把 px 转成 rem 或者 vw/vh 的话，工做量也是很大。

有没有工具直接能将如今的 px 直接转成 vw/vh呢？

确定也是有的! postcss-px-to-viewport

• 安装依赖

npm i postcss-px-to-viewport --save-dev

• 修改 postcss.config.js 文件配置

经过 F12 能够发现，全部 px 单位都转成了 vw

6. production 环境自动删除console.log

记得有一个需求是删除项目中全部的 console.log 代码，当时就懵逼了，页面这么多。

使用vscode 全局搜索，发现有几十个页面有这个语句。

若是所有手动删除的话，又费时，又没效率。因此想到经过插件来删除

• 安装须要的库

npm install babel-plugin-transform-remove-console --save-dev

• 修改 babel.config.js 配置

在 npm run build 的时候，就会自动删除 console.log

7. 其它优化

1. vue-cli3 项目从搭建优化到docker部署

若是你们还有什么更好的实践方式，欢迎评论区指教！！

项目地址 vue-admin 欢迎 star

欢迎关注

欢迎关注公众号“码上开发”，天天分享最新技术资讯