webpack에서 이미지 불러오기

  • 빌드하여 번들링할때 빌드된 폴더내의 이미지로 경로를 자동으로 수정되어야한다.
  • index.html에 직접 <img src="./imgs/img.jpeg>로 작성 되어있으면 번들링시에 제대로 변환이 안된다.
    • 직접 내부적으로 dom을 통해 img노드를 만들어야 번들링할때 이미지 경로가 수정되는것으로 보인다.

webpack.config.js

  • file-loader를 설치
    • npm install file-loader
  • module의 rules에 file-loader관련 작성하여 번들링 되도록 추가
...
    module: {
        rules: [
          {
            test: /\.(png|jpe?g|gif|svg|webp)$/i,
            use: {
              loader: 'file-loader',
              options: {
                name: '[name].[contenthash].[ext]', //이미지가 원본이름, 해쉬, 확장자를 이름으로 번들링된다.
              },
            },
          },
          ...
        ]
    }

내부에서 이미지 노드 생성

  • 내부의 코드로 아래와 같이 이미지를 import
  • img노드를 생성하여 src를 지정하여 img노드를 만든다.
import imgfile from "./assets/someimg.png"

export function createImg(){
    let img = document.createElement("img")
    img.src = imgfile
    return img
}
  • 만들어진 img는 아래와 같은 번들된 폴더의 이미지 경로를 가지게 된다.
    • img의 경로확인
    • publicPath를 지정 안하였기 때문에 url/번들이미지파일로 경로를 가진다.

public path란

  • public path가 없으면 root폴더는 index.html이 있는 폴더가 된다. public path는 이 root폴더의 위치를 지정하는 역할
    • 만약 github로 빌드할때에는 http:[유저].github.io/[repo]가 되므로 public path를 repo로 지정해줘야 한다.
  • output에 publicPath를 추가해주면 된다.

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js',
    publicPath: process.env.IP //url로 할때는 ip를 적어줘도 된다.
  },

참고

  • https://develoger.kr/frontend/webpack-%ec%9d%b4%eb%af%b8%ec%a7%80-%ea%b2%bd%eb%a1%9c-%ec%b2%98%eb%a6%ac/
  • https://yamoo9.gitbook.io/webpack/webpack/webpack-loaders/file-loader