[Webpack + opt] 이미지 파일들 webp로 변환하기 (imagemin-webp)

 

 

Intro.

webp파일은 동일 jpeg 파일 대비 약 30% , png파일 대비 약 65%정도 작습니다. 즉, 애셋으로 사용할 시, 로딩 타임에 대해 더 높은 퍼포먼스를 기대할 수 있습니다. 저 같은 경우, 웹팩 단에서 정적인 이미지들에 한하여 변환해주는 플러그인이 있는지 몰라, 그동안 일일이 파일 하나하나씩 변환해가며 사용했는데, 굉장히 유용하게 사용할 것 같습니다.

 

Image-minimizer-webpack-plugin을 베이스로 사용할거라, 만약 해당 플러그인 설정에 대해 잘 모르신다면, 아래글을 참고해 주세요

https://dev-dovi.tistory.com/36

[Webpack + Opt] 이미지 애셋 압축하기 (image-minimizer-webpack-plugin)

 

 

Goal

Before -> After (파일 이름 바뀐건.. 신경쓰지 말아주셔요)

 

 

Method

 

1. imagemin-webp를 설치합니다.

yarn add -D imagemin-webp

 

2. 애셋 파일을 처리하기 위한 패턴을 등록합니다.

 

module: {
        rules: [
          ... , //다른 rule
          {
            test: /\.(png|jpg|svg|jpeg)$/,
            type: 'asset',
            parser: {
            	dataUrlCondition: {
                    maxSize: 5 * 1024 // 5 kb 이하의 파일들은 base64 -> 인라인 주입 
                  }
            },
            generator: {
              filename: './images/[name].[contenthash:12][ext]'
            }
   }

 

 

3. config객체의 optimization 프로퍼티에 image-minimizer-webpack-plugin을 등록합니다.

 

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
	optimization : {
    	minimize: true,
        minimizer : [
        	'...',
            new ImageMinimizerPlugin({
            	minimizer : {
                    implementation: ImageMinimizerPlugin.imageminMinify, 
                    options: {
            			plugins: [ // 압축 필요할 시, 각 애셋 타입별 압축 알고리즘 등록 ]
                    }
                }
            })
            
        ]
    },
    module: {
        rules: [
          ... ,
          {
            test: /\.(png|jpg|svg|jpeg)$/,
            type: 'asset',
            generator: {
              filename: './images/[name].[contenthash:12][ext]'
            }
    }
}

 

 

4.  image-minimzer-webpack-plugin의 generator 프로퍼티에 imagemin-webp를 등록합니다. 이로써, 최종 파일을 생성할 때, webp로 변환합니다.

 

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
	optimization : {
    	minimize: true,
        minimizer : [
        	'...',
            new ImageMinimizerPlugin({
            	generator: [
                  {
                    type: 'asset',
                    implementation: ImageMinimizerPlugin.imageminGenerate,
                    filename: 'images/bb/[name][ext]', // subroute1/subroute2/filename.ext
                    options: {
                      plugins: ['imagemin-webp'] // 딱 하나의 플러그인만 자리해야합니다
                    }
                  }
                ],
            	minimizer : {
                    implementation: ImageMinimizerPlugin.imageminMinify, 
                    options: {
            			plugins: [ // 압축 필요할 시, 각 애셋 타입별 압축 알고리즘 등록 ]
                    }
                }
            })
            
        ]
    },
    module: {
        rules: [
          ... ,
          {
            test: /\.(png|jpg|svg|jpeg)$/,
            type: 'asset',
            generator: {
              filename: './images/[name].[contenthash:12][ext]'
            }
    }
}