提升开发效率的5个webpack插件

1. Vue-lazyload 图片懒加载 插件：vue-lazyload
2. Image-webpack-loader 图片压缩 插件：image-webpack-loader，npm install image-webpack-loader，在vue.config.js中配置，设置压缩比率，如0.7

Config.module

.rule('images')

.use('image-webpack-loader')

.loader('image-webpack-loader')

3, sprites 精灵图 自动合成插件：sprites, 安装sprites插件， 1：配置中添加 精灵图地址，2，在代码中直接引用图片，例：'assets/images/sprites/logo.png'

4, px 转rem 自适应屏幕 。Viewport插件：

5，r emove-console 生成环境中控制台不打印console .log

安装 remove-console插件

在配置里配置，如果是生成环境则使用去掉console的插件

另外，p roductionSourceMap:false 生产环境调试工具source - map

因生产环境代码被压缩，转译。而source map是将编译，打包后的代码映射回源代码的过程。

Sourcemap配合chrome可以提供一个debug线上项目的功能。只在打开控制台时才加载。

配置中： productionSourceMap:false

打开控制台右击add source map，出现webpack://,就可以调试对应的源码。