FE 개발환경의 이해와 실습 ver) webpack 5.0

* 사진이 많아서 키보드 넘버패드 왼쪽에 있는 'Page Up' 과 'Page Down'을 사용하여 보시면 편합니다!

 

[ 강의정보 ]

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD#

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

 

https://jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html

프론트엔드 개발환경의 이해: NPM

 

 

[ Ref ]

 

https://webpack.js.org/concepts/

Concepts | webpack

 

* webpack 4.0 -> webpack 5.0 migration

 

[ 저장소 ]

 

https://github.com/studyhackers/frontend

GitHub - studyhackers/frontend

 

 

[ 특이사항 ]

 

1. node , npm 명령어 사용을 위해 윈도우키를 눌러 'powershell' 검색

 

관리자로 실행

 

 

Set-ExecutionPolicy Unrestricted

 

복붙하고 엔터!

 

잘 적용되었는지 확인하기 위해

Get-ExecutionPolicy

 

복붙하고 엔터치면 현재 상태가 나옵니다.

 

 

 

 

2. 강의는 맥으로 진행하지만 윈도우일 경우

 

open 명령어 -> start

ex) index.html 을 열려고 할 때 

start index.html

 

(추가 기술)

 

 

 

3. webpack 4.0 vs webpack 5.0

 

a. --output => --output-path , -o 

 

 

b. "scripts": { "build": "./node~..webpack" }

 

=> "scripts": { "build": "webpack" }

 

 

[ 오류 ]

 

Refused to execute script from 'http://127.0.0.1:5500/uwon/dist/main.js/' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

 

< 해결방법 >