# webpack

198개의 포스트

2. react + webpack + babel로 개발 환경 구축하기 (javascript)

저는 보통 yarn 을 사용하기때문에 이 예제에서 npm을 사용하지 않지만 둘 중 하나 아무거나 해도 상관없습니다! react: React 라이브러리를 불러온다.react-dom: DOM rendering을 위한 ReactDOM을 담고 있다.webpack: webpac

약 11시간 전
·
0개의 댓글

1. webpack, babel에 대하여

모듈 번들러.모듈이 뭐지?모듈 번들러왜 번들링을 해야하는걸까?프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다. 그렇지만 웹팩에서의 모듈은 자바스크립트 같은 코드에만 국한되지 않고 웹 어플리케이션을 구성하는 모든 자원을 의미하는데, HTML, css, J

약 11시간 전
·
0개의 댓글
post-thumbnail

Webpack - Hard Source Webpack Plugin 적용 실패기

대규모 프로젝트 진행에 앞서 빌드할 프로젝트의 파일 개수가 많을 예정이기 때문에 빌드 속도는 느릴 것이 분명하다. 프로젝트 시작 전에 이러한 빌드 속도가 오래 걸릴 것을 예방하기 위해 어떻게 하면 Webpack을 사용한 빌드 속도를 개선할 수 있을지 고민하는 와중에 H

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

Webpack 기본

웹팩은 Front-end 프레임워크에서 많이 사용되는 모듈 번들러이다. 모듈 번들러는 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images 등)을 각각의 모듈로 보고 이를 병합하여 하나의 파일로 만들어주는 도구이다.웹 애플리케이션에서 각

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

StarWarsAPI : 2021.03.01 Sass Mixin ~ Webpack

at the very beginnin, I added too many plugins that is unnecessary to deal with 'scss' ,after simplyfing , it was solvedPlugin : javascript library th

5일 전
·
0개의 댓글

React - Webpack

1.create-react-app

2021년 2월 26일
·
0개의 댓글
post-thumbnail

Webpack

모듈 번들러이다 즉, 하나의 파일에서 연결하고 있는 무수히 많은 파일들을 하나로 묶어주어 한개의 파일로 새롭게 만드는 프로그램이다.왜하나로 만들까?파일들이 여러개로 분산되어 있으면 페이지에 들어갈 때 마다 서버는 js파일들과 필요한 파일들을 보낸다.이렇게 되면 페이지를

2021년 2월 25일
·
0개의 댓글
post-thumbnail

Webpack

모듈이 없던 때에는 하나의 html 파일에서 위의 방법으로 로딩을 해서 실행을 했다. 이렇게 하면 함수들이 전역 scope 에서 작동하게 된다. 함수 스코프를 만들어 사용. exports 키워드로 모듈을 만들고 require() 함수로 호출해서 사용할 수 있다. Nod

2021년 2월 25일
·
0개의 댓글
post-thumbnail

StarWarsAPI : 2021.02.04 React-Router-Dom Page Refresh 404 Error

After Refreshadd 'historyApiFallback' as 'true'

2021년 2월 24일
·
0개의 댓글
post-thumbnail

[프론트엔드 개발환경과 실습] Babel #6

가장 많이 쓰이며, es5 문법에 맞게 변환됨npm i @babel/preset env브라우저 버전명만 지정하면 env 프리셋이 최적의 코드를 출력해줌es5로 변환하지 못하는 것들로 코드 조각을 추가해서 해결Promise는 대체할 수 없으나 es5 버전으로 구현할 수는

2021년 2월 24일
·
0개의 댓글

webpack guide 정리

webpack 공식문서에서 guide를 보며 정리해야할 것들을 기록으로 남기려합니다. 삽질하고, 헷갈리고, 중요 컨셉을 중점적으로 정리해보겠습니다.이미지나 폰트같은 자원들은 웹팩에 내장되어있는 로더를 사용합니다.로더를 정의하는 부분에서 type 을 정의해주는데요. as

2021년 2월 21일
·
0개의 댓글
post-thumbnail

CRA sass-loader 설정하기

리액트를 다루는 기술중 컴포넌트 스타일링 챕터 sass-loader 오류 해결법이런식으로 오류가 뜬다options 속성안에 sassOptions 라는 속성을 추가한다https://webpack.js.org/loaders/sass-loader/

2021년 2월 21일
·
0개의 댓글
post-thumbnail

[프론트엔드 개발환경과 실습] NPM #1

👨‍💻NPM 프론트엔드 개발환경 실습 강의를 들으면서 기존에 궁금했던 내용을 추가하여 정리 하였습니다. 1. 프론트엔드 개발에 node.js가 필요한 이유 최신스펙으로 개발할 수 있다. 빌드 자동화 개발환경 커스터마이징

2021년 2월 15일
·
0개의 댓글
post-thumbnail

Webpack

Webpack 웹팩이란? 모던 자바스크립트 애플리케이션을 위한 정적 모듈 번들러.

2021년 2월 15일
·
0개의 댓글
post-thumbnail

TIL] Bundler-Webpack

Webpack? >Webpack은 JavaScript Module Bundler의 종류 중의 하나로 .js, .css, .jpg 등 여러개의 확장자로 구성된 여러개의 파일을 하나로 만들어 주는 도구이다. (bundler의 종류에는 Webpack, Broserify, P

2021년 2월 12일
·
0개의 댓글

Webpack

= static module bundler for Javascript.= 웹팩은 자바스크립트를 위한 모듈 번들러로 하나의 어플리케이션을 처리할 때 웹팩 내부적으로 dependency graph를 만들고 이것을 통해 어플리케이션, 혹은 프로젝트에 필요한 모듈들을 하나 혹

2021년 2월 12일
·
0개의 댓글
post-thumbnail

[프론트엔드 개발환경과 실습] Webpack #4

번들된 결과물을 난독화하거나 특정 텍스트를 추출하는데 사용플러그인은 Class로 제작appply 함수를 구현, 인자로 받은 compiler 객체 안에 있는 tap() 함수를 사용플러그인 작업이 완료되는 시점 = Done번들된 결과물에 접근 = compilationweb

2021년 2월 9일
·
0개의 댓글

[webpack] 로더(loader) 사용하기

로더는 모듈을 입력받아 원하는 형태로 변환 후 새로운 모듈을 출력해 주는 함수다.

2021년 2월 9일
·
0개의 댓글

[webpack] webpack 실행

웹팩은 모듈 번들러다. 모듈(Module)은 각 리소스 파일을 말하고, 번들(bundle)은 웹팩 실행 후에 나오는 결과 파일이다. 웹팩을 이용하면 우리가 제작한 여러가지 리소스를 사용자에게 전달하기 좋은 형태로 만들 수 있다.

2021년 2월 8일
·
0개의 댓글