FE 개발환경의 이해와 실습 ver) webpack 5.0
* 사진이 많아서 키보드 넘버패드 왼쪽에 있는 'Page Up' 과 'Page Down'을 사용하여 보시면 편합니다!
[ 강의정보 ]
프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의
이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요., - 강의 소개 | 인프런...
www.inflearn.com
https://jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html
프론트엔드 개발환경의 이해: NPM
몇 년 전부터 프론트엔드 개발자 채용 공고에 Node.js 기술이 우대 사항 항목으로로 추가 되었다. Node.js는 백엔드를 구현하는 기술이라고 생각했다면 이 채용 항목이 의문이었을지 모르겠다. 웹
jeonghwan-kim.github.io
[ Ref ]
https://webpack.js.org/concepts/
Concepts | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
* webpack 4.0 -> webpack 5.0 migration
[ 저장소 ]
https://github.com/studyhackers/frontend
GitHub - studyhackers/frontend
Contribute to studyhackers/frontend development by creating an account on GitHub.
github.com
[ 특이사항 ]
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.
< 해결방법 >