인프런 커뮤니티 질문&답변

1) 저도 publicPath 설정 부분이 의심됩니다.

• './dist/' 로 설정되어 있는지 확인 부탁드리고요.

2) name 설정도 의심되는 부분입니다.

• [name].[ext]?[hash]으로 지정했기 때문에 dist/bg.png 로 파일이 생성될 겁니다.

• 그럼 css에서는 url(bg.png?[hash]) 형태로 로딩해야하는데요.

• 캡쳐해주신 이미지에는 그렇지가 않네요. 여전히 [hash] 를 파일명으로 사용하고 있습니다. 이 부분도 확인 부탁드립니다.

제가 무엇을 놓쳤나 해서 처음부터 다시 따라하다가 다른점을 발견하게 되어 이 부분 때문에 안되는지 질문드립니다.

8:18초부분입니다. [name].[ext]?[hash] 설정하기 전 부분입니다.

질문1.

강사님이 build하게 되면 dist폴더 안에 이미지가 하나만 생성이 됩니다.

저의 경우 dist폴더안에 2개의 이미지가 생성이 되고 하나는 loading error가 나는 것을 확인하였습니다.

어떤 부분이 잘못되었는지 의심가는 부분을 알 수 있을까요??

.

웹팩이 빌드하면 dist 폴더에 파일이 생성되는데요. 이전에 빌드한 파일이 유지된채 새로운 파일이 추가되거나 기존 파일을 덮어쓰게 됩니다.

영상 8분 18초에서 file-loader에 [name].[ext]?[hash] 설정 전이라면

• dist 폴더에는 [hash].png 라는 파일이 생성될 거에요.

• 영상처럼요.

반면 file-loader에 [name].[ext]?[hash] 설정 후에 빌드하면

• dist 에는 bg.png 라는 파일이 생성될 겁니다.

아마도 영준님께서는 전자로 설정해서 빌드를 한 번 하시고 후자도 빌드를 하신 것 같아요. 그래서 dist에 파일 두 개가 있는 것 같습니다.

--

이 파일을 사용하는 css 쪽에서는 한 파일만 사용하는데요.

혹시 로딩 오류라는 건 어떤 현상을 말씀하시는 건지 궁금하네요.

항상 빠른답변주셔서 정말 감사합니다!

질문1. "이전에 빌드한 파일이 유지된채 새로운 파일이 추가되거나 기존 파일을 덮어쓰게 됩니다."

(1) dist파일을 삭제한다

(2) npm run build한다

dist폴더를 삭제하고 다시 build하게되면 기존의 빌드된 파일, 새로운 빌드파일 이렇게 2개가 생성된다는 말씀이신가요??

질문2. " 로딩 오류라는 건 어떤 현상을 말씀하시는 건지 궁금하네요."

(1) build이후 두개의 이미지파일이 생성됩니다.

(2) 하나는 잘 나오고 다른 하나는 "An error occurred while loading the image"가 문구가 나옵니다

예를들어) 3e4, 5c6d 두개의 이미지파일이 있으면

3e4는 "An error" 문구가 나옵니다

5c6d는 이미지가 잘 나옵니다

index.html파일을 열면 body는 항상 3e4파일을 참조하여

이미지가 index.html에 나오지 않습니다.

1. dist 폴더를 삭제하고 다시 빌드하면 새로운 빌드파일 하나만 생성됩니다.

2. 빌드하면 하나의 이미지 파일만 생성되는데요. 이 부분이 좀 이상한 것 같습니다.

현재 작업하신 코드를 깃헙이나 깃랩으로 공유해 주실 수 있을까요?

• 직접 코드를 보면 더 빨리 문제 해결하시는 걸 도와 드릴수 있을 것 같습니다.

• 공개된 저장소 링크를 주셔도 되고요.

• 제 깃헙 계정을 저장소에 초대해 주셔도 좋습니다. jeonghwan-kim 입니다.

https://github.com/YoungJun-MIN/webpack

여기있습니다!

이 코드로 문제를 재현했습니다.

원인은 패키지 버전이 강의에서 사용한 것과 달라서였습니다.

그동안 패키지의 주(major) 버전이 올랐는데요.

• webpack 4 → 5

• webpack-cli 3 → 4

• css-loader 3 → 7

• file-loader 5 → 6

• style-loader 1 → 4

최신버전을 사용하면 강의에 사용했던 코드와 호환되지 않는 문제가 발생할 수 있습니다. 질문 내용이 바로 그 결과였네요.

영상을 보시면서 패키지를 추가하실 때 수업에서 사용한 패키지를 사용하시면 원활하게 진행하실수 있을겁니다.

• 예를 들어 수업에서는 npm install webpack 이라고 했다면

• 실습하실 때는 npm install webpack@^4.41.5 로 사용하시면 됩니다.

수업에서 사용한 전체 버전은 깃헙에서 보실 수 있습니다.

• https://github.com/jeonghwan-kim/lecture-frontend-dev-env/blob/master/package.json

--

올려주신 코드 저장소는 쓰기 권한이 없어서 수정한 코드를 업로드 할수 없었습니다. 권한을 주시면 해결한 코드도 같이 올려 드릴게요.

아래는 제가 변경해서 해결한 코드입니다.

package.json

{
  "devDependencies": {
    "webpack": "^4.47.0",
    "webpack-cli": "^3.3.10"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "dependencies": {
    "css-loader": "^3.4.1",
    "file-loader": "^5.0.2",
    "style-loader": "^1.1.2"
  }
}

아 그렇군요!

원인을 찾아주셔서 정말 감사합니다