[React] 직접 개발 환경을 구축하고 배포시 이미지가 안 보일 때 | copy-webpack-plugin

CRA(Create React App)를 쓰지 않고 리액트 개발환경을 직접 구축할 수 있다는 것을 알게 된 이후  npx create-react-app my-app  같은 명령어를 커맨드라인에 치는 것보다 하나라도 직접 해보자는 생각으로 과제를 할 때 바벨과 웹팩을 이용하여 리액트 개발환경을 구축하고 있다. 그러면서 CRA가 얼마나 많은 환경설정들을 포함하고 있는지도 알게 되는 중이다. 

 

사전과제를 진행하면서 로컬에 이미지 파일을 저장하고 배포할 때 같이 묶어서 배포하는데 데브서버에서 잘 보이던 이미지가 배포를 하고 나니 원하는대로 보이지 않고 엑박인 상황이 발생했다. file-loader를 설정해줘야 했나 싶어서 설치하고 웹팩에 해당 설정을 해주었는데도,   npm build 로 앱이 빌드된 상황을 보니 설정해놓은 dist 폴더에 이미지가 제대로 전달되지 않는 상황. 

 

프로젝트에 이미지가 위치한 지점

⌄ public
  ⌄ assets
    ⌄ image
    index.html
> src

src에 이미지를 넣지 않고 public에 assets라는 폴더를 만들어서 그곳에서 이미지를 관리하려고 했다. 어느 곳에 이미지를 넣고 경로를 가져 오느냐에 따라 웹팩에서 설정해줘야 하는 게 다르다.

 

public에 있는 이미지들을 함께 빌드를 하려면 copy-webpack-plugin 이라는 걸 설치하고 웹팩에서 설정을 해줘야 함께 복사해서 배포시 이미지도 함께 복사되어 배포된다.

npm install -D copy-webpack-plugin

 

copy-webpack-plugin을 설치한 뒤에 webpack.config.js에서 다음과 같이 설정한다.

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

module.exports = {
...

  plugins: [
    ...
    new CopyPlugin({ patterns: [{ from: 'public/assets', to: 'assets/' }] })
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public')
    },
    compress: true,
    host: 'localhost',
    port: 3000
  }
};

데브서버에서 잘 보였던 이유는 배포할 때와는 다르게 플러그인 밑에 아래와 같이 public에 있는 것을 모두 함께 복사해서 가져왔기 때문에 이미지가 깨지지 않고 경로에 맞게 잘 보였던 것.