# webpack

410개의 포스트
post-thumbnail

2021.12.2 TIL

0.Webpack개념 1.Webpack등장배경 2.Webpack사용이유 3.Webpack-cli란? 4.Webpack의 Loader란?

약 1시간 전
·
0개의 댓글

[webpack] basic react webpack babel 설정

기본적인 React Webpack Babel 설정을 연습, 기록한다.프로젝트의 메타 정보를 관리할 pakage.json 파일을 프로젝트 루트에 생성한다.Webpack 개발 서버 환경을 구성하기 위한 의존 패키지를 설치한다.개발 서버에서만 사용할 것이므로 -D 속성을 붙

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

webpack 알아보기.

webpack.config.js

3일 전
·
0개의 댓글

[React] npm start, webpack 버전 에러

npx Creat-react-app으로 환경 설정을 하고 새로 프로젝트를 생성하는 과정에서 다음과 같은 에러를 마주했다. 확인 결과, 외부 webpack의 버전이 creat-react-app에서 요구되는 버전과 일치하지 않아서 발생한 에러였다.

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

[Webpack] 렌더링된 image url이 base64로 나올때

scss 소스 상에서는 상대경로로 작성한 이미지파일 경로가 개발자도구에서는 base64로 나오는 상황webpack.config.js 파일에서 limit을 수정해줘야 한다. limit 보다 작은 파일은 base64로 변환하고 큰 파일은 그대로 보여주기 때문!

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

webpack을 사용한 SPA 구현에서 class name 중복 피하기

Vanilla JS는 무적이고 webpack은 신이다.

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

[webpack] favicon 설정

webpack config로 html-webpack-plugin을 사용하면서 favicon을 로드할 수 있는 방법에 관하여 알아보았다favicon 만드는 방법html-webpack-plugin을 활용하여 설정하는 방법html-loader 활용하여 설정하는 방법포토샵,

2021년 11월 27일
·
1개의 댓글
post-thumbnail

Webpack 기초 간단 정리✨ - 응용편

이번에는 지난 번에 작성한 바닐라 자바스크립트 코드를 리액트 기반의 코드로 바꿔볼 예정이다!😙 그럼 바로 시작해보자🔥

2021년 11월 24일
·
5개의 댓글
post-thumbnail

웹팩(webpack)

이제 나도 압축전사!

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

웹팩 환경에서 React Router 새로고침 했을 때 404에러 해결하는 방법

webpack.config.js에 historyApiFallback:true를 추가해준다

2021년 11월 22일
·
0개의 댓글

webpack

webpack

2021년 11월 21일
·
0개의 댓글

[Webpack] 웹팩 환경에서 이미지 로드하기

file-loader설치npm i file-loaderwebpack.config.js에 새로운 rule을 추가 해준다.

2021년 11월 19일
·
0개의 댓글

jsx를 읽을 수 없는 문제

문제 원인 : module의 rule을 잘못 설정하였음module의 rules의 test부문이 js -> js|jsx 이어야 함

2021년 11월 19일
·
0개의 댓글
post-thumbnail

[Webpack] 웹팩으로 리액트 개발환경 셋팅하기

1. 개발환경 초기화 > npm init package.json 파일이 생성된다. 2. 리액트 설치 > npm install react react-dom 3. 웹팩 설치 > npm i -D webpack webpack-cli -D : 개발용으로만 웹팩을 사

2021년 11월 18일
·
0개의 댓글

webpack.config.js 를 ESM 방식으로 바꾸어 dev server를 구축하기

webpack.config.js는 ESM모듈로 충분히 변경할 수 있다.

2021년 11월 18일
·
0개의 댓글

webpack, babel을 이용한 프로젝트 설정

매번 필요할 때마다, 궁금할 때마다 설정들을 가져와 사용만 하다 이번 기회에 저만의 프로젝트 webpack, babel 설정을 정리했습니다.webpack, babel 공식 문서를 참고해 작성했습니다.개발, 배포용에서 함께 사용할 수 있는 webpack 설정입니다.첫 시

2021년 11월 14일
·
0개의 댓글
post-thumbnail

React | 코드 스플리팅 (+webpack / build)

리액트 프로젝트 완성 후 → 사용자에게 제공 시, 빌드 작업 거쳐 배포파일 크기 최소화 js 파일 내부의 불필요한 주석, 경고 메세지, 공백 등 → 제거 코드 트랜스파일 작업 브라우저에서 JSX 문법 or 다른 최신 js 문법 → 원활한 실행 되도록 정적 파일(

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

webpack + babel

모듈단위의 js들을 모아서 하나의 app.js로 번들링해주는 기능 크로스브라우징을 위해 es6문법으로 작성된 js를 es5로 변환해주는 기능루트폴더에 npm init을 해준다.\*이때 폴더에 package.json파일이 생겨남웹팩과 바벨을 설치해준다 \*웹팩 바벨은 개

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

리액트 프로젝트 웹팩 설정

리액트 프로젝트를 하면서 설정 했던 웹팩 설정들을 알아보자.

2021년 11월 9일
·
0개의 댓글
post-thumbnail

Webpack

WebPack의 개념과 사용법

2021년 11월 6일
·
0개의 댓글