메인 화면의 Cannot GET / 에러

 

메인 화면

개발자도구

결과부터 말하자면 웹팩설정파일인 webpack.config.js와 index.html파일이 같은 디렉토리 아래 있지 않아서 생긴 문제였다. 즉, npx webpack serve라는 명령어를 터미널에 입력하면 webpack.config.js파일부터 찾아서 실행하고 그 다음에 index.html파일을 찾는다. 여기서 index.html을 기본적으로는 webpack.config.js과 같은 디렉토리에서 찾는다. 찾아보고 없으면 에러를 위와 같은 에러를 발생시키는 것이다.(그리고 webpack.config.js 파일에서는 index.html파일이나 index.html에서 언급된 파일을 어느 디렉토리에서 찾을지 마저 설정해 줄수 있는 기능이 있다. webpack공식문서 참고하면 나온다. 물론 검색어는 잘 설정해서.  아래는 관련글 링크이다.  https://yamoo9.gitbook.io/webpack/webpack/webpack-plugins/automatic-injection-to-html-document

해결: index.html파일을 webpack.config.js파일과 같은 디렉토리에 넣어주어 해결하였다.