webpack图片压缩image-webpack-loader

{// 图片文件的处理
   test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
   use:[
     {
       loader: 'url-loader',
       options: {
         // limit代表图片最大的大小,图片小于limit时，在加载该图片时会将图片编译为base64形式的字符串
         // 超过limit的图片会被压缩到dist文件夹中
         limit: 8192,    // 当图片小于8k的时候会把图片转为base64格式
         // 对打包到dist文件的图片进行重新命名
         // 加上中括号代表这是一个变量，根据要打包的图片进行相应的修改
         // [name]代表图片名称；[hash:8]代表8位自动生成的哈希值；[ext]代表图片的后缀名
         name: 'img/[name].[hash:4].[ext]',
       },
     },
     {  
       /**注：一定要用cnpm安装包(cnpm i image-webpack-loader -D)，
        * npm安装的包，build就会报错，具体原因未知 2020/08/20
        */
       loader: 'image-webpack-loader',     
     },
   ]
 },

具体操作

1. 若安装过 image-webpack-loader 先卸载（注意：一定要用cnpm安装image-webpack-plugin，亲测用npm安装的会报错）

cnpm uninstall image-webpack-loader
或
yarn remove image-webpack-loader  

2. 安裝cnpm , cnpm是国内源，访问速度比较快，（这里同时将全局的 registry 设置成阿里的镜像了，已经改成阿里源的可以去掉–registry及其后面的指令）、

npm install cnpm -g --registry=https://registry.npm.taobao.org
或
npm install cnpm -g

3. 使用 cnpm 安装 image-webpack-loader 会发现很快就安装好了

cnpm install--save-dev image-webpack-loader
或
cnpm i image-webpack-loader -S

注：如果先前尝试使用 yarn 或 npm 安装过，一定要先卸载掉用 cnpm 安装