Bundler

위와 같은 미션이 포함되어 있는 과제를 하며 정말 많은 어려움을 겪고 있다.😭 그동안 ES6모듈화에 대해 공부를 해야지,,하면서 미루고, 작은 프로젝트에서 한 파일정도 가지고 와 연결하는 정도로만 진행을 해보았더니 막상 따로따로 필요 요소들을 어떻게 한 프로젝트를

index.html을 이용해 개발 서버를 오픈하고 브라우저에서 내용을 확인하는 방법에 대해 정리를 해보았습니다.webpack.config.js 기본 설정설치가 끝나면 webpack.config.js 파일로 이동하여 설치한 플러그인을 가져옵니다.plugins에는 번들링

webpack: 모듈(패키지) 번들러의 핵심 패키지webpack-cli: 터미널에서 Webpack 명령(CLI)을 사용할 수 있음webpack-dev-server: 개발용으로 Live Server를 실행(HMR)html-webpack-plugin: 최초 실행될 HTML

프로젝트에 연결되었으면 하는 파일을 개발 서버를 열거나 제품화 시킬 때, 직접 웹페이지에 연결되는 dist 폴더로 자동으로 넣어줄 수 있는 패키지에 대해 살펴보도록 하겠습니다.위와 같이 root경로에 static이라는 폴더를 만들어 favicon.ico파일을 위치시켰습

css 파일을 통해 스타일을 적용하는 두가지 방법에 대해 알아보도록 하겠습니다.첫 번째는 static 폴더 내부에 css 폴더를 생성하여 연결하는 방법입니다.index.html에 주변에서 css폴더를 찾아 그 안에 있는 main.css를 찾을 수 있도록 link태그를

공급업체 접두사를 자동으로 진행해주는 패키지 autoprefixer를 webpack을 통해 설치하는 방법에 대해 이야기해보도록 하겠습니다.먼저, 정상적으로 작동하는지를 확인하기 위해 scss파일 내부에 display:flex 속성을 넣어줍니다.postcss는 스타일의

먼저, Babel이란 무엇인지 개념을 정리해보도록 하겠습니다.Babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScri

ECMAScript는 2015년 이후로 매년 최신문법이 나오고 있습니다. 따라서 구버전의 브라우저에서도 최신 문법이 적용될 수 있도록 polyfill작업을 해주어야합니다. 이 때 사용되는 번들러를 사용을 합니다. 대표적인 번들러로는 Parcel외에도 Webpack, R