webpack 이미지 올리는 법 file-loader, copy-webpack-plugin

webpack을 이용해서 겨우겨우 HTML,CSS,JS를  구축했더니

이제는 이미지가 말썽이다.

 

나는 index.html에 <img>태그를 써서 src 경로에 이미지 경로를 넣었다.

근데 webpack-server을 사용해서 서버를 돌렸더니 이미지를 못찾는다는 것이다..

 

그래서 이게 뭘까 했다.

 

 

일단 문제는 내가 webpack-server을 돌릴 때 public폴더

즉 빌드된 폴더를 서버에 실행시키고있다.

그래서 public폴더에는

내가 개발 중인 src폴더에 있는 images폴더와 이미지 파일들이 없으니까 오류가 생기는 것이다.

 

문제는 바로 찾았다

그럼 어떻게 빌드 폴더에 이미지를 올릴까?

 

해결 영상

https://www.youtube.com/watch?v=FWyDqz3KzzI

 

 

바로 file-loader을 이용해야했다.

먼저 file-loader를 설치하자

https://v4.webpack.js.org/loaders/file-loader/

npm install file-loader --save-dev

 

그리고 webpack.config.json에 아래 module rules를 추가해주자

 module: {
    rules: [
     
     ...
     
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: "file-loader",
        options: {
          name: "images/[name].[ext]", //[폴더명][파일명][ext]
        },
      },
      
     ...
     
    ],
  },

 

이를 통해서.css-loader 처럼 이미지 파일도 loader가 필요하다.

 

그리고 css-loader을 했던 것 처럼 아래와 같이 import 해줘야한다.

 

근데 나는 생각했다.

이미지 하나할 때마다 이렇게 해야한다고...?

너무 불필요했다.

분명 다른 방법이 있을텐데... 

 

그래서 위 유튜브 영상을 찾게 되었다.

영상에서는 file-loader와 image-webpack-plugin 그리고 copy-webpack-plugin을 사용했다.

 

근데 내가 사용하면서 느낀 것은 file-loader는 필요없는거 아닌가? 생각했다.

 

나는 copy-webpack-plugin만 사용해서 문제를 해결했다.

근데 이게 해결 방법이 맞는지는 모른다.

 

내 해결 방법은 아래와 같다.

 

1. copy-webpack-plugin 설치

https://webpack.kr/plugins/copy-webpack-plugin/#root

npm install copy-webpack-plugin --save-dev

 

2. 아래 코드 추가

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        from: "./src/images",
          to: "./images/",
      ],
    }),
  ],
};

 

이것만 해서 build 폴더에 images 폴더안 파일들을 모두 넣을 수 있었다.

 

그리고 file-loader는 찾아보니까 deprecated되었더라..

v4에서만 사용하고 v5에서는 사용하지 못한다고 되어있었다.

 

 

 

추가적으로 

image-webpack-plugin

해당 플러그인도 사용하면 좋을 것 같았다.

이미지가 너무 크면 빌드 폴더가 너무 커지니까 그런 것들을 방지해줄 수 있다고 한다.

https://yamoo9.gitbook.io/webpack/webpack/webpack-plugins/minimize-images

이미지 파일 크기 최적화 - Webpack 러닝 가이드