Webpack 플러그인 이미지-webpack-loader 도입 이미지 타임즈 오류
9599 단어 앞구덩이를 밟다
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')
}
}]
},
처리 순서를 바꾸어 먼저 자원을 불러온 다음에 압축을 진행한다.
그리고 해결이 됐어요.
4
image-webpack-loader
플러그인은 처리 순서의 마지막에 놓고 다른 플러그인으로 그림을 불러오면 해결된다