babel-core module 에러

혹시 웹팩으로 빌드하실 때 오류가 나는 것일까요? 질문을 읽어보면서 저도 몇 가지 궁금한 게 생겼습니다. 1) 웹팩 5를 사용하셨다고 했는데 캡쳐하신 package.json에는 버전 3으로 되어있습니다. 이 상태에서 npm run build 나 npm run dev를 실행하면 버전 3으로 실행될텐데요. 웹팩 5를 어떻게 사용하셨는지 궁금하네요. 2) babel-core의 template을 사용하신 것 같습니다. 수업에서 다루지 않는 내용인데요. 혹시 이것 때문에 패키지를 추가하시는 걸까요? 문제를 재현할 수 있는 코드를 깃헙으로 공유해 주시면 좋겠습니다. 제 로컬 환경에서도 실행해 보면 좀 더 빨리 도와 드릴 수 있을 것 같습니다.

webpack에서 babel-loader 사용할때 질문

네 그렇습니다. 로더 옵션에 추가된 값은 바벨 옵션과 합쳐진다고 하네요. The options passed here will be merged with Babel config files, e.g. babel.config.js or .babelrc. 이 문서를 참고하면 도움이 되실 겁니다. https://webpack.js.org/loaders/babel-loader/

eslint no-extra-semi 관련 질문

플러그인을 사용할 때 제공하는 룰을 명시해야하나 봅니다. 저도 플러그인을 잘 사용해 보진 않아서 확실친 않습니다만 이 문서를 참고해 보시면 도움이 되실 것 같아요. https://eslint.org/docs/latest/use/configure/plugins#use-plugin-rules -- 두번째 지원 종료된 룰에 대해서는 잘 모르겠네요.

자주 사용하는 플러그인 에서 질문이 있습니다.

웹팩의 plugins 설정 값이 배열이기 때문입니다. 조건에 따라 MiniCssExtractPlugin을 배열에 넣어야하기 때문에 나머지 연산자를 사용했어요.

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

제가 질문의 의도를 제대로 이해했는지 모르겠네요. 터미널에서 웹팩 명령어로 실행한 뒤에 빌드한 결과물을 브라우져에서 열고 싶다. 이게 궁금하신 것일까요? master 브랜치 기준으로 설명드리자면 그렇게 동작하지는 않습니다. 웹팩 설정파일에 보시면 HtmlWebpackPlugin을 사용하는데요. src/index.html 파일을 기준으로 여기에 번들한 결과물을 주입하는 역할을 합니다. 웹팩 빌드 결과물인 dist/index.html에 보시면 이러한 코드가 생성되었을 겁니다. 전체 파일 경로를 사용하지 않고 axios.min.js를 다시 요청하는 코드인데요. dist 폴더를 서빙하는 웹서버가 없는 한 동작하지 않는 코드입니다. 원하시는 결과물을 얻으려면 웹서버 전용 도구를 사용하시는 것을 추천 드립니다. browser-sync 같은 웹서버 도구를 사용하셔도 좋고요. 수업에서 미리 준비해둔 npm start로 웹팩 개발 서버를 띄우도 가능합니다. // broswer-sync로 dist 폴더를 서빙합니다. npx browser-sync start --server ./dist // 혹은 미리 준비해둔 npm 스크립트로 웹팩 개발 서버를 실행합니다. npm start