提升开发效率的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，remove-console   生成环境中控制台不打印console.log

   安装 remove-console插件

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

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

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

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

   配置中： productionSourceMap:false

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