yeeed_log

[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) 프로젝트 환경설정 이전 포스팅의 마무리 느낌으로 바닐라 자바스크립트 기반의 개발환경을 세팅해보자! 👊 1. 프로젝트 버전관리 npm init -y 2. .gitignore 파일 생성 및 설정 # dependencies /node_modules # production /dist # etc .DS_Store .vscode .gitignore 파일에는 git으로 추..

[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) Dev Server 매번 웹팩 명령어를 실행하지 않아도 코드를 수정하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다 실시간으로 리로드 되는 웹팩의 개발 환경 동작과정 dev-server는 dist 폴더와는 관계없이 동작 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에 보이지 않는다. 메모리에 저장되고 파일로는 생성 X 수정된 결과물 또한 메모리 상에 ..

[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) Plugin 플러그인은 웹팩의 기본동작에 추가기능을 제공하는 속성 로더는 파일을 해석하고 변환하는 과정 플러그인은 해당 결과물의 형태를 바꾸는 과정 // webpack.config.js module.exports = { plugins: [] } 플러그인 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있다. const webpack = require(..

[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) Loader 웹팩이 웹 어플리케이션을 해석할 때 웹 자원을 변환시켜주는 속성 자원을 해석할 때 js, json파일을 기본으로 본다. 만약 다른 파일을 모듈로 불러와 사용하게 될 경우, loader 라는 요소를 설정해줘야 한다. // webpack.config.js module.exports = { module: { rules: [ { test: , use:[]..

[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) Output 웹팩이 빌드되고 난 후 결과물의 파일 경로. // webpack.config.js module.exports = { output: { filename: 'bundle.js' } } 객체형태로 옵션을 추가할 수 있다. 최소한의 옵션으로 filename을 지정해줘야 한다. Output 옵션 속성 // webpack.config.js module.exp..

[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) Entry 웹팩에서 웹 자원(HTML, CSS, JavaScript, Image, Font...)을 변환하기 위해 필요한 최초 진입점 자바스크립트 파일 경로 웹팩이 빌드를 수행하는 곳 // webpack.config.js module.exports = { entry: './src/index.js' } 어떤 내용이 담겨야 하는가? 웹 어플리케이션의 전반적인 구조..

[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) 웹팩이란? 자바스크립트 모듈 번들러중 가장 인기있는 모듈 번들러로 사용된다. 여러개로 나누어져있는 파일들을 각각의 모듈로 보고 이를 조합하고 압축해 최적화해주는 도구. 최종 배포용 파일을 만들어 준다. 웹팩에서 모듈이란? 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원(HTML, CSS, JavaScript, Images, Font 등..