Webpack 插件 image-webpack-loader 引入图片时报错

今天写个人主页引入自己头像的时候突然报了个这样的错误

Html Webpack Plugin:

  Error: Child compilation failed:
  Module build failed (from ./node_modules/image-webpack-loader/index.js):
  Error: '\[项目目录]\node_modules\pngquant-bin\vendor\pngquant.exe' �����ڲ����ⲿ���Ҳ���ǿ����еij��� 
  ���������ļ���
  
  
  - Error: '\[项目目录]\node_modules\pngquant-bin\vendor\pngquant.exe' �����ڲ����ⲿ���Ҳ���ǿ����еij���
  
  - ���������ļ���
  
  - child-compiler.js:122 
    [项目名称]/[html-webpack-plugin]/lib/child-compiler.js:122:18
  
  - Compiler.js:343 
    [npm]/[webpack]/lib/Compiler.js:343:11
  
  - Compiler.js:681 
    [npm]/[webpack]/lib/Compiler.js:681:15
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [npm]/[webpack]/[tapable]/lib/Hook.js:154:20
  
  - Compiler.js:678 
    [npm]/[webpack]/lib/Compiler.js:678:31
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [npm]/[webpack]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1423 
    [npm]/[webpack]/lib/Compilation.js:1423:35

我寻思着，我也是按照官方的时候说明的啊。咋会这样。

接着回头一想，是不是因为他的配置有啥问题。

webpack 的配置

	// 图片
    {
        test: /\.(gif|png|jpe?g|webp|svg)$/,
        use: [{
            loader: 'url-loader',
            options: {
                // 小于 8k 全部压缩
                limit: 8192,
                name: confget.GetOutName('img', 'static/pic/[name].[ext]'),
                publicPath: confget.GetUrlOf('img')
            }
        }, {
            loader: 'image-webpack-loader',
            options: {
                progressive: true,
                optimizationLevel: 7,
                interlaced: false,
                // jpeg / jpg
                mozjpoeg: {quality: 70},
                // png
                pngquant: {quality: "65-90", speed: 4},
                // gif
                gifsicle: {interlaced: false},
                // webp
                webp: {quality: 75}
            }
        }]
    },

中间有几个看不懂的很正常，因为是用我自己的自动化框架写的。

看了一下配置，发现并没有问题。但是转头一想…

    // 图片
    {
        test: /\.(gif|png|jpe?g|webp|svg)$/,
        use: [{
            loader: 'image-webpack-loader',
            options: {
                progressive: true,
                optimizationLevel: 7,
                interlaced: false,
                // jpeg / jpg
                mozjpoeg: {quality: 70},
                // png
                pngquant: {quality: "65-90", speed: 4},
                // gif
                gifsicle: {interlaced: false},
                // webp
                webp: {quality: 75}
            }
        }, {
            loader: 'url-loader',
            options: {
                // 小于 8k 全部压缩
                limit: 8192,
                name: confget.GetOutName('img', 'static/pic/[name].[ext]'),
                publicPath: confget.GetUrlOf('img')
            }
        }]
    },

换了个处理顺序，先加载资源再进行压缩。

然后就解决了

image-webpack-loader 插件放在处理顺序的最后，先用其他插件加载图片就能解决了