Webpack 플러그인 이미지-webpack-loader 도입 이미지 타임즈 오류

오늘 개인 홈페이지에 자기 프로필 사진을 올렸을 때 갑자기 이런 오류가 발생했어요.
Html Webpack Plugin:

  Error: Child compilation failed:
  Module build failed (from ./node_modules/image-webpack-loader/index.js):
  Error: '\[    ]
ode_modules\pngquant-bin\vendor\pngquant.exe' �����ڲ����ⲿ���Ҳ���ǿ����еij��� ���������ļ��� - Error: '\[ ]
ode_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

나도 공식적으로 설명한 대로 생각하고 있었어.어떻게 이럴 수가 있어?
이어서 뒤돌아보니 그의 배치에 무슨 문제가 있는 것 아니냐고 생각했다.
웹팩 설정
	//   
    {
        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')
            }
        }]
    },

처리 순서를 바꾸어 먼저 자원을 불러온 다음에 압축을 진행한다.
그리고 해결이 됐어요.
4image-webpack-loader 플러그인은 처리 순서의 마지막에 놓고 다른 플러그인으로 그림을 불러오면 해결된다

좋은 웹페이지 즐겨찾기