webpack 3

[Webpack] 3. CSS 번들링하기

import나 require로 css랑 기타 이미지, html 또는 폰트 파일도 묶을 수 있다. CSS번들링 하기위한 설정 npm i -D style-loader css-loader mini-css-extract-plugin css-loader는 css파일들을 읽어주고 style-loader는 읽은 css 파일들을 style 태그로 만들어 head태그 안에 넣어준다. 만약 style태그 대신 css 파일로 만들고 싶은 경우에 mini-css-extract-plugin을 사용하면 된다. { module:{ rules:[{ //전 포스팅 babel-loader },{ test:/\.css$/, use:['style-loader','css-loader'] }], } } 위와 같이 하면 된다. test 부분은 ..

webpack 2022.10.25

[Webpack] 2. tsconfig 설정

tsconfig 란? Typescript로 짜여진 코드는 Javascript로 변환해 줄 트랜스파일러(컴파일러)가 필요하다. 이러한 컴파일 과정에서 사용자가 필요한 여러 옵션을 설정할 수 있다. 그러한 파일이 tsconfig.json이다. npx tsc --init 커맨드를 통해 기본형태를 생성할 수 있다. tsconfig.json 컴파일 옵션 정리 옵션에 대한 자세한 정보는 여기에서 참고 사용한 옵션 { "compilerOptions": { /* 기본 옵션 */ "target": "es5", /* 사용할 특정 ECMAScript 버전 설정: 'ES3' (기본), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 혹은 'ESNEXT'...

webpack 2022.10.25

[Webpack] 1. Webpack + Typescript + React 환경설정

Webpack이란? 여러개의 파일을 브라우저에서 로딩하는 것은 네트워크 비용을 그만큼 사용하게 되어 결국 반응속도가 느려지게 되는 문제점이 발생하고 이외에도 많은 문제점이 있다. 이러한 문제를 해결하기 위해 module bundler로 Webpack을 사용한다. 쉽게 말해 많은 파일들을 필요한 형태의 하나 또는 여러개의 번들파일로 만들어준다는 것이다. 그럼 왜 Webpack을 사용할까? 1. 네트워크 병목현상을 해결할 수 있다. 너무 많은 자바스크립트 파일을 로드하게되면, 네트워크 병목현상에 빠질 수 있다. 이때의 해결방법으로 하나의 자바스크립트 파일만을 사용할 수 있지만 이 방법에는 문제점이 있다. 그 문제점은 바로 가독성과 유지보수의 효율성이 떨어진다는 것이다. 해결방법으로 Webpack과 같은 모듈..

webpack 2022.10.25