webpack5 에서 open index.html하는법 + 질문
166
67 asked
1)
"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로 랩핑? 해서 읽어온 이유를 아시나요?
Answer 1
0
제가 질문의 의도를 제대로 이해했는지 모르겠네요.
터미널에서 웹팩 명령어로 실행한 뒤에 빌드한 결과물을 브라우져에서 열고 싶다.
이게 궁금하신 것일까요?
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
0
강의 제목은 엔트리/아웃풋 실습 입니다. 여기서
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로 랩핑(?) 해서 가져왔는가가 질문이었습니다. 아니면 이런 현상?에 대한 키워드 같은것을 혹시 아시나요..?
0
아마 사용하신 웹팩 옵션이 차이인 것 같습니다.
우선 문서에 보시면 두 개 옵션에는 차이가 있는데요.
$ 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
지금 시점에서 해당 강의를 듣는 것에 대하여
1
109
3
2025년 기준 번들러 트렌드와 선택 기준이 궁금합니다 (Webpack, Vite, tsup 등)
1
220
1
에러 해결 공유드립니다
1
223
2
webpack 4 버전과 호환되는 플러그인 버전 공유드립니다
1
232
2
eslint
0
379
3
도와주세요!
0
165
2
[수강 중 트러블슈팅 공유] webpack, webpack-cli 버전
1
144
1
질문 an error occurred while loading the image
1
468
1
webpack에서 babel-loader 사용할때 질문
1
149
1
자주 사용하는 플러그인 에서 질문이 있습니다.
1
167
1
eslint no-extra-semi 관련 질문
1
142
1
TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable
2
300
1
혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?
1
370
1
에러없이 png안뜨시는 분들
1
273
1
Error: Cannot find module 'node:crypto'
1
463
1
DefinePlugin 관련; env와 관련하여, (21.06.22 16:15, aloha_jh) 답변포함
1
404
1
깃허브 확인 문의
0
574
1
폴더를 prettier로 돌렸을 때 나오는 에러 구문에 대한 질문
0
404
1
해쉬값과 캐쉬 갱신
1
459
1
Hash 에러 발생
1
2666
2
webpack.config.js에서의 CommonJS방식에 대한 질문
0
828
3
웹팩 버전
0
521
1
웹팩-cli 버전을 명시하지 않으면 왜 에러가 날까요?
0
482
1
import해오는 두가지 방법에 대해 제가 잘 이해한건지 확인받고 싶습니다!!
0
318
1