# webpack

34개의 포스트

(TIL 11일차) React

react webpack

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

node_modules안에 있는 모듈 babeling 안될 때

node_modules안에 있는 모듈 일부를 babeling 하려는데 안되는 현상 ("@babel/core": "^7.7.5") 해당 모듈들이 es5가 아니라서 babeling하려고함 .babelrc webpack.config 여기서 webpack.config에있는 exclude가 먹지 않는 상황 webpack에 options객체가 없으면, ...

2020년 2월 7일
·
1개의 댓글

React build 시 sourcemap 제거하기

왜 제거해야 하나요? create-react-app으로 React 프로젝트를 빌드하여 배포하는 경우, 기본적으로 webpack에 의해 번들링 된 파일과 해당 파일에 대응되는 sourcemap이 생성됩니다. 다음은 결과 예시이며, .css.map과 .js.map 파일이 sourcemap입니다. sourcemap은 간단히 말하면, 디버깅을 위한 파일입니다....

2020년 2월 5일
·
0개의 댓글

Webpack 기본기 익히기

그동안 web개발할때 직접 구조를 잡아본적이 없던지라, 패드 개발하며 webpack공부가 필요했다. 그래서 뭘 공부해야할지 리스트를 요청해서 잘하는 선배님께 받았다. 이렇게 공부하면 된다구 하셨다. npm init, create package.json webpack install (devDependency) + webpack-cli webpack co...

2020년 1월 29일
·
0개의 댓글

How to minifiy webpack codes in Rails 6

First install uglifyjs-webpack-plugin with yarn Then add these line in webpack configeriation file It's done! Reference https://github.com/rails/webpacker/blob/master/docs/webpack.md https://webpac...

2020년 1월 25일
·
0개의 댓글
post-thumbnail

나만의 React 프로젝트 설계하기😎

최근에 프로젝트 설계에 대해 매우 좋은 평가를 받아서 내가 사용하고 있는 프로젝트 구조를 공개해보면 더 많은 성공을 거두지 않을까 싶어 글을 적는다. 개인적으로 부족한 점이 많다고 생각되는데 한 번 칭찬을 들으니까 욕심이 생겨서 더 많은 평가를 통해 부족한 점을 채워보고 싶다. 🤗 배경 React를 이용해서 웹을 개발...

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

Webpack의 핵심

Webpack은 웹 어플리케이션을 개발할 때 가장 인기 있는 번들러입니다. React 앱을 빌드해주는 도구로 생각하고 CRA의 Webpack 설정을 그대로 사용하기 보다는 이것이 어떻게 동작하는지, 핵심 원리는 무엇인지 이해해야 하지 않을까? 라는 생각에서 글을 적게되었습니다.

2020년 1월 12일
·
0개의 댓글

모던 브라우저에도 꼭 es5를 써야 할까 (Differential Serving)

모던 브라우저에도 꼭 es5를 써야 할까 프로덕션 레벨의 서비스를 개발할 때는, es6를 모든 브라우저에서 사용성을 보장하기 위해 es5로 바꿔주는 babel이라는 트랜스파일러를 씁니다. babel에 browser target을 지정해서 지원하고자 하는 브라우저 스팩에 맞게 문법을 변환해주죠. 그런데 사실, 이렇게 바꾸지 않아도 이제는 대부분 모던 브라...

2020년 1월 2일
·
3개의 댓글
post-thumbnail

웹팩(webpack)의 cache-loader

웹팩 Loader 의 역할 웹팩은 정적 모듈 번들러(static module bundler)입니다. 모듈 번들러는 entry 속성에 지정된 \*.js 파일을 분석해 require/import 로 의존관계에 있는 리소스(css, image, webfont)와 자바스크립트 모듈을 묶어 웹 브라우저에서 실행 가능한 하나(혹은 여러 개)의 번들 파일을 생성합니다...

2019년 12월 30일
·
2개의 댓글
post-thumbnail

생활코딩 마인드맵 라이브러리 cytoscape 사용법

🚀 발단 생활코딩에 접속해서 수업 소개 섹션으로 가면 수업간의 관계를 확인할 수 있는 마인드 맵이 있습니다. 개인적으로 공부한 것들의 흐름을 위와 같이 정리하면 좋을 것 같았습니다. 그래서 해당 라이브러리가 cytoscape라는 것을 확인 후 이를 활용해 비슷한 사이트를 개발을 해봤습니다. 그러나 cytoscape 관련한 별도의 한글 정보가 없어 영...

2019년 12월 26일
·
0개의 댓글
post-thumbnail

parcel 기초 세팅

오늘은 웹 어플리케이션 번들러 3대장webpack, rollup, parcel중 하나인 parcel의 세팅 방법에 대해 알아보겠습니다. 물론 알아볼 것도 없이 parcel 홈페이지가 워낙 번역이 잘되어 있긴 합니다 ㅎㅎ;; 그래도 세팅이 어려운 분들을 위해 작성해봅니다. 시작하기 먼저 parcel을 실행하려면 parcel을 설치해야겠죠? Yarn:...

2019년 12월 26일
·
0개의 댓글

[react + pwa + webpack] PWA 적용하기

PWA 적용하기 1. 노드 모듈 인스톨 pwa에 관련한 웹팩 모듈을 인스톨 해준다. 2. manifest.json 파일 생성 public/manifest.json 3. webpack 설정 추가 webpack.config.js src/sw.js manifest 와 service worker 설정까지 추가하였다. 4. serviceWorker ...

2019년 12월 23일
·
2개의 댓글

[react + pwa + webpack] 투두 리스트 만들기

투두 리스트 만들기 1. src/components/Root.js 생성 src/components/Root.js src/index.js 2. 스타일 관련 폴더 생성 및 sass-loader 추가 webpack.config.js 원래 스타이 설정 부분(test: css)로 되었던 부분을 아래와 같이 변경. src/styles/index.scss ...

2019년 12월 22일
·
0개의 댓글

[react + pwa + webpack] 리액트 프로젝트를 웹팩으로 설정하기.

리액트 프로젝트를 웹팩으로 설정하기. 1. 프로젝트 생성 및 깃 저장소 master 푸시. .gitignore 2. 프로젝트 구조 설정 및 기초가 되는 node module 인스톨 src 폴더 생성. public 폴더 생성. es6 문법을 사용하기 위한 노드 모듈 설치. 3. 웹팩 관련 모듈 설치 4. webpack.config.js 설정 we...

2019년 12월 22일
·
0개의 댓글

webpack으로 TypeScript 번들링하는데 Module not found 오류가 뜨는 경우.

resolve.extensions 속성에 '.js'가 빠져 있어서 그랬다. .js가 빠져 있으니 node_module에 있는 일반 js 파일을 찾지를 않더라. 어디서 TypeScript 번들용 설정파일을 주워다가 썼더니 resolve.extensions에 .js는 빼놨더라..

2019년 11월 28일
·
0개의 댓글

React 개발환경 세팅하기(without CRA) - 1. webpack 설치하기

프로젝트 디렉토리 생성 index.html 만들기 root폴더에 index.html 생성 script에 번들 코드 추가 웹팩설치 및 설정 package.json의 script에 start 명령어 코드 설정 root폴더에 webpack.config.js파일생성 개발서버 실행해보기 root폴더에 src폴더 생성후 index.js 파일 생성 index....

2019년 11월 27일
·
0개의 댓글

웹팩으로 리액트 시작하기

react 시작하기 + webpack + babel + sass 설정 리액트를 정리하기 위한 블로그입니다. 잘못된 개념의 경우는 피드백 주시면 감사하겠습니다. 리액트 왜 쓸까요? 사용자 인터페이스를 만들기 위한 Javascript 라이브러리 프레임워크라고 생각하고 있습니다. 사용자 인터페이스가 영어로 줄이면 UI죠. 버튼, 메뉴, 링크 이런걸 얘기하겠...

2019년 11월 15일
·
0개의 댓글
post-thumbnail

webpack-dev-server 사용하기(=삽질후기)

프론트에서 js모듈화를 진행하기 위해 babel과 webpack을 적용하였다. ES6 최신문법을 브라우저에서도 사용하기 위해서 babel을 적용하고, 그걸 하나로 뭉쳐주기 위해(?) webpack을 적용하였다. 그렇게 한 결과 html 뷰에서 webpack으로

2019년 11월 2일
·
0개의 댓글

Webpack 기초

개발환경을 구축하면서 배우는 Webpack 기초를 보고 실습하면서 작성한 글입니다. 처음 공부하고 있어서 부족하거나 잘못된 정보가 있을 수 있습니다. (2019.10.30 수) 조금 더 자세히 알게 되거나 수정할 부분이 있으면 바로바로 수정하겠습니다. Webpack이란? 웹팩에 대한 개념을 잡기 위해서는 우선 모듈 번들러(Module Bundler)가 ...

2019년 10월 31일
·
0개의 댓글

Webpack 기초

이 글은 React 개발 환경을 구축하면서 배우는 Webpack 기초(https://velog.io/@jeff0720/React-개발-환경을-구축하면서-배우는-Webpack-기초) )를 따라하면서 적은 글입니다. Webpack의 개념 1CNeQyaChrTh0H3ovOd9Dgg.png 우선 Webpack에 대해

2019년 10월 30일
·
0개의 댓글