# webpack

146개의 포스트
post-thumbnail

[JavaScript] Webpack - Bundle

Webpack Bundle JS, CSS, JPG, PNG 등 여러개의 파일들을 모듈로 다룰 수 있는데 웹팩을 사용하면 웹에 사용되는 다양한 파일을 모두 모듈로 다룰 수 있습니다. 서로 참조하는 파일들을 모아서 하나의 파일로 묶는 것을 Bundle이라고 합니다.

1일 전
·
0개의 댓글

Webpack Part 3. Plugin

Plugin loader가 파일 단위로 처리하는 반면 plugin은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다. plugin은 arguments/options을 사용할 수 있으므로 webpack conf

1일 전
·
0개의 댓글
post-thumbnail

Webpack part 4. Babel

Babel is a compiler (source code => output code). 바벨의 기본 동작 기본 동작을 코드로 설명하자면 const babel = code => code;이라 할 수 있다. 주어진 코드가지고 변환된 새로운 코드를 생성한다. 바벨은

2일 전
·
0개의 댓글
post-thumbnail

Webpack Part 2. loader

webpack의 기본 개념을 알아봤다면 이번에는 webpack을 실습하면서 어떤 결과가 나오는지 알아볼것이다.실습한 내용은 김정환님의 프론트엔드 개발환경 이해이다.여기서 자주 사용하는 로더를 실습한다.style-loadercss-loaderfile-loaderurl-l

4일 전
·
0개의 댓글

React 06. webpack

create-react-app 이전에 리액트 구조에 대해 기본적으로 알아보기웹팩이란? 20000개가 넘는 컴포넌트를 하나의 자바스크립트로 합쳐주는 도구webpack.config.js 파일을 만들고 module.exports 안에 exports할 파일들을 넣어준다. cl

4일 전
·
0개의 댓글

cra에서 eject으로 웹팩 sass-loader 설정 커스터마이징하기

먼저 sass를 사용할려면 node-sass를 설치해줘야한다. cra로 만든 프로젝트는 프로젝트 구조의 복잡도를 낮추기 위해 세부 설정이 숨겨져있기 때문에 커스터마이징을 할려면 yarn eject

4일 전
·
0개의 댓글
post-thumbnail

[React] Webpack & Babel

웹팩(Webpack)은 자바스크립트 정적 모듈 번들러(Static Module Bundler)이다.웹팩의 주요 네 가지 개념으로 Entry, Output, Loader, Plugin이 있다.웹 애플리케이션에 필요한 모듈들을 하나의 파일로 묶는 도구이다.이때 모듈은 웹

4일 전
·
0개의 댓글
post-thumbnail

Webpack Part 1. core concepts

Webpack webpack아란 정적 모듈 번들러이다. 자바스크립트에서 모듈이란 js로 이루어진 작은 기능단위 코드를 지칭한다. 하지만, webpack은 js의 모듈뿐만 아니라 스타일시트,이미지 등 모든 것을 자바스크립트 모듈로 로딩해서 사용한다. Core Con

4일 전
·
0개의 댓글
post-thumbnail

웹팩(Webpack) - 나무흔들기

애플리케이션 번들 파일을 최적화하기 위한 웹팩의 나무흔들기(Tree Shaking)에 대해 알아보자.

6일 전
·
0개의 댓글
post-thumbnail

[FE] 취업 이후 만나게 된 것들 2.Gulp

취업을 준비할 때는 생각지 못했던, 옛날 기술들에 대해 생각을 정리해보는 글을 작성해 보기로 했습니다. 두번째는 Gulp 입니다!

6일 전
·
0개의 댓글

Webpack build

React나 Vue를 설치할때 CRA나 CLI로 설치를 하면 프레임워크를 사용하기 위해 필요한 모든 dependencies가 알아서 설치가 되면서 build가 자동으로 되므로 아주 간편하게 바로 사용이 가능하다.하지만 단점이 있다면, 꼭 필요하지 않은 dependenc

7일 전
·
0개의 댓글

Vue vs. React - 설치

React은 CRA,Vue는 CLI

7일 전
·
0개의 댓글

Vue vs. React

React 와 Vue는 어떻게 다를까?

7일 전
·
0개의 댓글
post-thumbnail

React overview (feat. Babel, Webpack)

React, Babel, Webpack 엿보기

7일 전
·
0개의 댓글
post-thumbnail

webpack loader

loader 웹팩은 로더가 있기 때문에 js뿐만 아니라 css, 이미지, 폰트 모든것을 모듈화하여 import 구문으로 js안으로 불러올수 있게 해준다. 이제 js파일 안에서 css나 문자열로 변환된 이미지를 import 해올수있는것이다. 기본적으로 js파일은 별도의

2020년 11월 28일
·
0개의 댓글
post-thumbnail

배워서 나주는 WEBPACK

배워서 나주자

2020년 11월 28일
·
0개의 댓글
post-thumbnail

webpack 등장 배경

webpack의 등장 배경 webpack 등장 이전의 javascript는 각각의 파일을 module처럼 분리시켜서 html파일에서 로드해오는 방식을 취했었다. 결과 잘 작동하지만 이 방식의 경우 sum이란 함수가 브라우저의 전역객체인 window의 메서드로 들어

2020년 11월 26일
·
0개의 댓글
post-thumbnail

웹팩(Webpack)

자바스크립트 프론트엔드 개발에서 모듈 번들러로 가장 많이 사용되는 웹팩(Webpack)에 대해 알아보자.

2020년 11월 24일
·
0개의 댓글
post-thumbnail

오픈소스 맨 땅에 헤딩 SnowyJS 1화 (부제: Velog 메인에 눈내리기)

학교 해커톤에서 만들어본 간단한 프로젝트입니다. 이 친구는 웹사이트에 눈을 내리게 해주는 프로젝트로, 앞으로 오픈소스로 조금씩 조금씩 키워나가보고 싶습니다. 많은 조언과 응원 부탁드려요!

2020년 11월 23일
·
0개의 댓글

React webpack 세팅 TIL

"@babel/core": "^7.12.3", // 최신문법으로 세팅"@babel/preset-env": "^7.12.1", //환경에 맞게 세팅"@babel/preset-react": "^7.12.5", //JSX로 세팅"babel-loader": "^8.2.1",

2020년 11월 20일
·
0개의 댓글