webpack 설정 오류 관련

earthssu commented 3 years ago

현재 웹팩을 설정해보는 작업을 하고 있는데요, 제일 최근 커밋한 파일에서 run npm dev 를 실행시키면

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
  configuration.module.rules[1] has an unknown property 'query'. These properties are valid:
   object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
   -> A rule description with conditions and effects for modules.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! todo-list@1.0.0 dev: `webpack-dev-server --hot --inline`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the todo-list@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\earth\AppData\Roaming\npm-cache\_logs\2021-02-26T02_01_35_671Z-debug.log

다음과 같은 오류가 발생합니다... 여기서 wepack.config.js를 es6 모듈로 변경하면

SyntaxError: Cannot use import statement outside a module

해당 오류가 발생합니다. package.json에 {"type": "module"}은 설정해놓은 상태입니다. 처음 설치할 때 설정이 꼬인 건지 이 두 오류만 계속 뜨네요... 어디가 문제인지 아시나요?

devSoyoung commented 3 years ago

package.json 이 없어서 웹팩이나 다른 의존성 버전을 볼 수가 없어용ㅜㅜ 설치해서 돌려볼 수도 없고요.. 😭

earthssu commented 3 years ago

방금 확인했어요 이제 추가했습니다...! 감사해요 ㅜㅜ

devSoyoung commented 3 years ago

Invalid configuration 오류는 내용을 확인해보면 babel loader 설정에 오류가 있다는 것으로 보이는데, query라는 프로퍼티를 쓸 수가 없는데 설정되어 있어서 오류가 나는 것 같아요 presets에 대한 설정은 options에서 해야할 것 같네용 😊

ref. https://webpack.js.org/loaders/babel-loader/

devSoyoung commented 3 years ago

https://github.com/earthssu/Todo-List/blob/b966d4eb7ef7c9f1bb2badb6f3a1cf23666d8ca8/src/index.html#L50

여기에서 현재 로드하는 스크립트 파일은 웹팩으로 번들링 한 결과물인 dist 디렉토리에 위치한 파일이 아니라 번들링 하기 전의 js 파일을 로드하고 있어요

그리고 그 js 파일 내에서는 css 파일을 import 하고 있는데 자바스크립트는 스스로 css 나 이미지 등 js가 아닌 파일을 import 할 수가 없습니당 그래서 css 로더 파일로더 등을 사용하는거예요

html 파일에서 로드하는 스크립트의 경로를 변경해봅시당

요 글을 참고해보세용 https://stackoverflow.com/a/58212338

earthssu commented 3 years ago

덕분에 해결되었습니다! 도와주셔서 너무 감사해요 ㅠㅠ 근데 js 파일 내에서 css 파일 import 하는 구문을 없애면 css가 적용되지 않는데, 웹팩 css 설정에 있어서 빠진 부분이 있어서 그런 걸까요?

YimJiYoung commented 3 years ago

안녕하세요 ~ 지나가다 들렀습니다 👋 웹팩 css 설정에는 문제 없는 것 같아요. css 파일 import하지 않으면 적용되지 않는 것이 정상입니다! 사용할 css 파일은 import를 해야 해당 파일이 번들에 포함되기 때문에 스타일이 적용됩니당

earthssu commented 3 years ago

헉 언니 답변 감사합니당! 도움 많이 되었어요 최고최고 ㅜㅜ 😍

earthssu / Todo-List

webpack 설정 오류 관련 #2