webpack5 에서 open index.html하는법 + 질문

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

엔트리/아웃풋 실습

24.08.26 15:02 작성

수정됨

"webpack": "^5.94.0",

"webpack-cli": "^5.1.4"

node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path ./dist

다른 질문글에 open index.html 을 했는지 모르겠지만 저는 잘 안되더라구요
차이점은 ./dist/main.js 에서 ./dist 입니다.

main.js를 /dist/main.js/main.js 이렇게 만들어버리더라구요
그래서 요상한 에러들 때문에 해맸었습니다.

2) 제가 봤던 에러는 크롬 디버깅창에 main.js를 그대로 로딩하지않고 마치html처럼 <!DOCTYPE html> 이 첫줄에 추가된 체로 로딩이 되어서
unexpected token "<" 와 같은에러를 봤습니다.

혹시 왜 js를 html로 랩핑? 해서 읽어온 이유를 아시나요?

node.js 웹팩 babel eslint

답변 1

김정환

지식공유자

2024. 08. 28. 09:21

제가 질문의 의도를 제대로 이해했는지 모르겠네요.

터미널에서 웹팩 명령어로 실행한 뒤에 빌드한 결과물을 브라우져에서 열고 싶다.

이게 궁금하신 것일까요?

master 브랜치 기준으로 설명드리자면 그렇게 동작하지는 않습니다.

웹팩 설정파일에 보시면 HtmlWebpackPlugin을 사용하는데요. src/index.html 파일을 기준으로 여기에 번들한 결과물을 주입하는 역할을 합니다.
웹팩 빌드 결과물인 dist/index.html에 보시면 이러한 코드가 생성되었을 겁니다.

<script type="text/javascript" src="axios.min.js"></script> 
<script type="text/javascript" src="null.js"></script></body>

전체 파일 경로를 사용하지 않고 axios.min.js를 다시 요청하는 코드인데요. dist 폴더를 서빙하는 웹서버가 없는 한 동작하지 않는 코드입니다.

원하시는 결과물을 얻으려면 웹서버 전용 도구를 사용하시는 것을 추천 드립니다.

browser-sync 같은 웹서버 도구를 사용하셔도 좋고요.
수업에서 미리 준비해둔 npm start로 웹팩 개발 서버를 띄우도 가능합니다.

// broswer-sync로 dist 폴더를 서빙합니다.
npx browser-sync start --server ./dist 

// 혹은 미리 준비해둔 npm 스크립트로 웹팩 개발 서버를 실행합니다.
npm start

dohyun_lim

질문자

2024. 08. 28. 09:33

강의 제목은 엔트리/아웃풋 실습 입니다. 여기서

node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path ./dist/main.js

webpack 5, webpack-cli 5에서 위 명령어를 치고 open index.html을 하면 아래 스샷처럼나오게 됩니다.

dist/main.js/main.js 로 가 되어서 안되는것 같습니다.

node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path ./dist

로 하고 open index.html을 하

처럼 잘나옵니다.

궁금했던것은 이때 왜 첫번째의 에러처럼 javascript를 html로 랩핑(?) 해서 가져왔는가가 질문이었습니다. 아니면 이런 현상?에 대한 키워드 같은것을 혹시 아시나요..?

김정환

지식공유자

2024. 08. 29. 17:13

아마 사용하신 웹팩 옵션이 차이인 것 같습니다.

우선 문서에 보시면 두 개 옵션에는 차이가 있는데요.

$ node_modules/.bin/webpack --help

--output, -o.    The output path and file for compilation assets
--output-path    The output directory as **absolute path**
                                (required).

--output은 번들 결과물의 파일 이름을 지정하는 옵션입니다. dist/main.js 파일로 결과물 경로를 설정하실 것이라면 이 옵션을 사용하시면 될것 같네요.

node_modules/.bin/webpack --mode development --entry ./src/app.js --output ./dist/main.js

--output-path는 결과물이 담길 폴더를 지정하는 옵션입니다. dist에 결과물을 저장할 것이라면 이 옵션을 사용하시면 되고요. (이건 질문자 분께서 확인했던 명령어)

node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path ./dist

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

webpack5 에서 open index.html하는법 + 질문