#Webpack

글 21개

개발 환경 · 2024년 9월 20일
[Monorepo] Turborepo, mf-app 환경구성
Monorepop 프로젝트를 구성하기 위해 Turborepo 의존성 설치 및 환경 구성을 진행한다. corepack 설치 이제 Root 에 pnpm-workspace.yaml 을 생성합니다. 저의 경우 apps 폴더 하위에 ui-kit 을 사용하는 프로젝트들을 만들예정이기 때문에 아래와 같이 작성합니다.
개발 환경 · 2022년 1월 23일
Webpack 실습 (7) - 주요 Plugin 실습
대표적으로 많이 사용하는 Plugin 에 대한 개념 설명 및 실습을 정리하는 포스팅이다. loader 와 같이 custom 으로 작성하는 일은 거의 없으며 웹펙에서 제공하는 플러그인을 알아본다.
개발 환경 · 2022년 1월 19일
Webpack 실습 (6) - Plugin 기본 개념정리
실무에서 주로 사용하는 대표적인 로더들에 대한 실습을 진행해본다. loader 를 통해서 파일단위로 다양한 처리를 하였다면 plugin 을 통해서는 bundling 된 결과물을 처리한다. 예를 들면 bundling 된 javascript 를 난독화하거나 특정 텍스트를 추출 하는 용도이다.
개발 환경 · 2022년 1월 12일
Webpack 실습 (5) - 주요 Loader 실습
실무에서 주로 사용하는 대표적인 로더들에 대한 실습을 진행해본다. CSS-Loader : css 코드를 javascript 로 가져와서 사용 가능
개발 환경 · 2022년 1월 11일
Webpack 실습 (4) - Loader & Module
웹팩은 자바스크립트, 스타일시트, 이미지, 폰트 등 모든 소스를 각각의 모듈로 바라보기 때문에 import 구문을 사용하여 외부 소스를 활용한다.
개발 환경 · 2022년 1월 10일
Webpack 실습 (3) - 초기설치 및 설정
package.json 에 devDependencies 확인 이전에는 몰랐는데 이런 라이브러리 들을 사용할때 가장 먼저 봐야하는것이 help 를 통한 설명인것 같다. 각 command 가 어떤 역할을 하는지 알 수 있다.
개발 환경 · 2022년 1월 9일
Webpack 실습 (2) - 개념정리
ES2015 부터 모듈을 지원했기 때문에 이전에는 script 를 html 에서 불러와 로딩하여 사용하였다. 위와 같이 진행하면 app.js 는 math.js 에서 sum 함수를 불러와 사용하지만, sum 함수가 전역 스코프에 노출되는 점으로 인해 문제가 발생할 여지가 있다.
개발 환경 · 2022년 1월 8일
Webpack 실습 (1) - 패키지 설치 및 버전관리
프로젝트 폴더 이동 후 npm init 실행 command 로 설정이 완료된 후 실제 프로젝트 폴더 내 package.json 파일 확인
개발 환경 · 2021년 12월 9일
html webpack plugin(플러그인 사용법)
앞서 플러그인 사용법을 봤지만 이번에 새로 사용하는 겸 기록해둔다. HtmlWebpackPlugin 의 경우 정의된 html 파일에 빌드 결과물을 추가해준다.
- #Webpack
- #html Webpack Plugin
개발 환경 · 2021년 12월 7일
Webpack Dev Server
실제 빌드 전 개발 서버로 실제 파일 시스템에 build 가 완료된 파일을 만들지 않고 인메모리 상에만 올려놓아 개발하는 기능
- #Webpack
- #Bundling 실습
개발 환경 · 2021년 12월 4일
Webpack Bundling
웹팩을 구축하고 실제 html 파일에서 bundle.js 내용을 그려주면 아래와 같이 적용이 되는 실습을 하였다.
- #Webpack
- #Bundling 실습
개발 환경 · 2021년 12월 1일
Plugin 사용
우리는 다양한 플러그인들을 다양한 방법으로 개발에 사용하고 있다. 대부분의 플러그인들은 우리가 하는 개발을 조금 더 편하게하고 기본기능은 보존한채 추가적인 방향으로 바꿔서 편리하게 사용할 수 있게 하고 있다
- #Webpack
- #Plugin
개발 환경 · 2021년 11월 29일
Webpack 의 주요 속성 소개
빌드를 할 대상 파일을 작성한다. 즉, entry 속성은 웹팩에서 우리가 빌드를 할 대상의 파일 경로를 작성하며 이는 웹팩 변환의 가장 먼저 동작하는 진입점이기도 하다.
- #Webpack
- #속성
개발 환경 · 2021년 11월 23일
Modules
export : 특정 파일에서 쓸 변수, 함수 등을 내보내는 문법 익스포트한 대상은 다른 파일에서 import 를 통해 사용 가능
- #Webpack
- #Modules
개발 환경 · 2021년 11월 4일
Webpack 에 대한 정의와 배경, 사용이유
모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다. 이처럼 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하면 모듈이 된다.
- #Webpack
- #Webpack Definition
개발 환경 · 2021년 11월 1일
Webpack First Principle 영상 리뷰
현재 공부하고 있는 강의에서 webpack 에 대한 유투브 분석 강의를 보았다. 유투브 링크 이 영상의 초기에는 특정 Application 을 만들어 놓고 집에서 쾌적한 인터넷 환경에서 할 경우와 어딘가 굉장히 느린 환경에서 웹 페이지 속도를 크롬 개발자 도구로 보여주며 시작을 하게 된다.
개발 환경 · 2021년 10월 31일
Webpack 변환 전/후 성능비교
웹팩 결과 파일 디렉터리 패스 변환 전의 경우에는 html 에서 sciprt 내 cdn 으로 불러왔기 때문에 lodash.js, index.js 를 호출하게 된다.
- #Webpack
- #성능비교
개발 환경 · 2021년 10월 28일
Script 설정 관리 (webpack.config.js)
위 json 파일에 정의한대로 webpack 을 build 할 때 우리는 여러가지 옵션을 줄 수 있다. 예로 --entry , --output 같이 파일, 위치 등을 본인이 원하는 폴더에 생성하겠다는 옵션 같은것들 말이다.
개발 환경 · 2021년 10월 27일
Webpack 시작하기
앞선 작업물에서 WebPack 프로젝트를 만들고 NPM 을 통해 환경을 구축하였다. 이제 실제 Webpack을 시작해보도록 한다.
- #Webpack
- #NPM(Node Package Manager)
개발 환경 · 2021년 9월 21일
Webpack 정리
웹팩(Webpack)이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.
- #Webpack
- #모듈 번들러(Module Bundler)
개발 환경 · 2021년 9월 20일
NPM(Node Package Manager)
NPM(Node Package Manager)는 전 세계 자바스크립트 개발자들이 올려놓은 공개된 라이브러리 저장소에 올라와 있는 자바스크립트 라이브러리를 명령어로 설치 및 관리할 수 있는 패키지 매니저 이다.
- #Webpack
- #NPM(Node Package Manager)