webPack - 01

Jeon seong jin·2020년 5월 31일

React

목록 보기

7/8

웹팩을 들어가기 앞서 왜 웹팩을 사용할까?

여러개의 파일을 하나로 묶어주기 때문에 네트워크 접속의 부담이 덜하다.
빠른 서비스를 제공
여러개의 서로 다른 패키지들이 서로 같은 이름의 전역 변수를 사용하면 프로그램은 오작동을 일으킨다.(충돌) 이 문제를 극복하기 위해서 등장한 것이 모듈 웹팩은 아직 최신 기술이라서 적용하기 애매한 기술인 모듈을 오래된 브라우저에서도 사용할 수 있게 도와준다.
웹팩에는 많은 플러그인들이 존재, 플러그인을 이용하면 웹개발시에 필요한 작업을 자동화 할 수 있음

모듈의 개념

모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위
웹팩에서의 모듈은 자바스크립트 모듈에만 국한되지 않고 웹 어플리케이션을 구성하는 모든 자원을 의미한다. 파일 하나하나가 모두 모듈
일반적인 js 코드를 위한 코드다 살펴보면 <head> 부분에 script 를 넣어 각각 파일안에 "word"라는 변수를 넣어 'Hello"와 'World'라는 데이터를 넣었다.
그렇다면 화면에는 당연하게도 'world' 라는 텍스트만 나오게 된다. 이유는 덮어 쓰였기 때문이다. 그럼, 수천개 수만개의 파일과 코드가 있을 때 아무리 변수명을 다르게 주려고 해도 시간적 경과와 많은 오류를 야기 시키기에 이러한 문제들을 타개하기 위하여 모듈이라는 개념이 나오게 된 것이다.

첫번째 사진의 코드와 비교 시 각 해당 파일에 export default 와 import 가 추가 되었다. 이로인해, 해당 파일에서만 사용되는 변수로 모듈화 시킬 수 있다. 실제로 개발자 도구에서 word를 찾으면 undefined로 나온다.

하지만 이 모듈의 문제점은 나온지 얼마 되지 않았기에 구버젼의 브라우저에서는 사용이 제한된다는 점이다. 이 문제를 해결할 수 있는 것이 번들러라는 개념이며 번들러 중 웹팩을 중심으로 알아 볼 것이다.

웹팩을 쓰기 전 용어 정리

Entry

entry 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로

module.exports = {
	entry : "./src/index.js"
}

위 코드는 웹팩을 실행했을 때 src 폴더 밑의 index.js을 대상으로 웹팩이 빌드를 수행하는 코드

output

웹팩을 돌리고 난 뒤 결과물의 파일 경로를 의미

module.exports = {
	output : {
		filename : 'bundle.js'
		path: path.resolve(__dirname,'./dist')
	}
}

entry 속성과는 다르게 객체 형태로 옵션들을 추가해야 한다.
filename 속성은 웹팩으로 빌드한 파일의 이름을 의미, path 속성은 해당 파일의 경로 path 속성에서 사용된 path.resolve() 코드는 인자로 넘어온 경로들을 조합하여 유효한 파일경로를 만들어 주는 Node.js API

웹팩

"프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러" 모듈 번들러란 웹 어플리케이션을 구성하는 자원(HTML,CSS,Js,Images)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구

웹팩을 설치하기 위해선 node.js의 환경을 구축해야 한다.
구축 후 npm init 으로 이 프로젝트의 pakage를 만든다.

위 사진과 같이 npm install -D webpack weback-cli 로 웹팩을 설치 해 준다. -D 는 개발을 위한 설치 파일이라는 것을 명시 해 준다.

source 폴더 내부에 index.js 파일을 만들어 해당 import되는 내용들을 담고 사용한다. 이 파일은 입구에 해당되며 이것을 entry(엔트리)라고 부른다.
웹팩을 사용해서 index.js파일을 번들링을 해서 hello,world.js 파일을 index.js파일에 번들링을하자.
작업한 내용(번들링)을 한 것을 public이라는 폴더에 넣는다고 해보자.

npx webpack으로 시작되며 --entry "입구에 해당되는 파일명" --output "출력되어 반환될 파일명" 으로 실행 시킨다.
위 내용은 entry를 모두 합쳐 번들링을 하여 output으로 묶여 반환해! 라는 내용

실행을 시켜보면 예전에 했던 해당 내용과 동일하게 나오면서 단 하나의 파일을 받아 모든 기능이 다 들어있어 서버와 사용자에게 더 윤활하게 만들어 준다. 그리고 import도 알아서 다 처리해서 오래된 브라우저에서도 사용할 수 있게 변환시켜 줘서 지원할 수 있게 되었다.

웹팩 설정파일을 만들어서 간편하게 사용하자.

웹팩을 명령어로만 실행하면 불편한 점이 많이 있다. config 파일을 만들어서 설정파일을 저장하는 방법을 알아보자

어떻게 다양한 형태를 웹팩으로 던져줄 것인가를 알아야 한다. 그리고 어떤 방법으로 가공할 것인가를 알아야 한다.

기존에 우리가 사용한 명령어는 사용하기가 굉장히 불편하다. 이러한 방법이 아닌 다른 방법으로 사용하는 방법을 알아보자

가이드란에 보면 configration이라는 메뉴가 있다. configuration은 웹팩에게 어떤 명령들을 보여주는 것
잊은 사항이 있다면 가이드의 start를 보고 하면 된다.

webpack.config.js이라는 파일을 생성 후 공식문서에 나와있는 우측의 예제를 참고하여 코드를 작성한다.
위 코드에 const path = require('path')는 파일의 경로를 쉽게 핸들링 할 수 있게 해주는 일종의 부품
entry : './source/index.js' 는 시작점이 어디인가를 나타내고 output:{path.resolve(dirname,"public")} 여기서 dirname 은 현재 config.js의 현재위치를 알려주는 약속된 변수 , 두번째 인자의 최종 경로
실행은 npx webpack --config webpack.config.js 로 실행한다.

웹팩의 실행모드

개발을 하기 위한 것인지 실제 서비스를 하기 위한것인지에 따라 모드를 달리 변경해야 된다.
구분을 짓기위해 config.js를 복제하여 붙여놓은(물론 이름은 다르게 해야 된다.) 다음 mode를 변경해서 사용하면 된다.

웹팩의 꽃 로더

웹팩은 js뿐만 아니라 css,png도 번들링을 해준다. 그렇게 구동될 수 있게 해주는 것이 로더!
웹팩의 도큐먼트 가이드에서 Asset을 보면 css를 번들링을 할 수 있는 가이드가 나와있다.
test는 정규식 코드의 양식을 지켜주고 "css"라는 키워드가 있는 경로를 찾아
"use" 는 말 그대로 저 로더 형식으로 번들링이 되게끔 만드는 것이다. css-loader로 로더가 되게끔 만들고 style-loader로 스타일이 적용되게 끔 만드는 것

웹팩의 아웃풋

아웃풋은 index.js 뿐만 아니라 다른 파일로서도 번들링을 하여 엔트리를 여러가지를 만들 때 사용한다.(output으로 여러가지를 적용할 때)

entry: {
// index,about이라는 이름의 키를 만들어 엔트리를 여러개를 생성한다.
	index : './index.js',
	about: './about.js'
},
output : {
// 여러가지 엔트리가 있을 때 대괄호 []에 name을 넣어 여러가지 아웃풋을 만든다.
	filname:'[name]_bundle.js'
}

웹팩의 플러그인 도입

웹팩의 두가지의 확장 기능이 있다. 한가지는 "로더" 한가지는 "플러그인"
로더는 규정되어 있고 최종적으로 아웃풋을 만든다.
만들어진 최종 결과물을 "변형한다"라고 생각하고 자유롭고 더 복잡하다.(사용법이 제각각이다.)

React 와 Webpack 결합하기

프로젝트 생성

프로젝트를 생성하고 npm init 를 통해 초기화를 진행

React

npm install -D react react-dom

Babel

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

@babel/core

리액트는 ES6를 사용하기 때문에, 여러 브라우저에서 사용할 수 있게 ES5로 변경 해 준다.

@babel/preset-env

ES6를 ES5로 변환하고, 브라우저에 알아서 컴파일을 진행한다.

@babel/preset-react

리액트 jsx 문법을 Js로 변경

babel-loader

자바스크립트 파일을 babel preset/plgins과 webpack을 사용하여 es5로 컴파일 해주는 plugin

webpack

npm install --save-dev webpack webpack-dev-server webpack-cli html-loader css-loader node-sass sass-loader html-webpack-plugin mini-css-extract-plugin

webpack

모든 리액트 파일을 하나의 컴파일된 하나의 자바스크립트 파일에 넣는 역할

webpack-dev-server

개발환경에서 바로 확인을 할 수 있다 (live-reload)

webpack-cli

build 스크립트를 통해 webpack 커맨드를 사용하기 위해서

html-loader, css-loader, sass-loader

html, css, sass를 위한 로더

html-webpack-plugin, mini-css-extract-plugin

html과 css를 위한 플러그인

Ref : 생활코딩 : https://opentutorials.org/module/4566
https://velog.io/@jeff0720/React-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD%EC%9D%84-%EA%B5%AC%EC%B6%95%ED%95%98%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-Webpack-%EA%B8%B0%EC%B4%88#%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

Jeon seong jin

-기록일지

이전 포스트

webPack - 01

React

웹팩을 들어가기 앞서 왜 웹팩을 사용할까?

모듈의 개념

웹팩을 쓰기 전 용어 정리

Entry

output

웹팩

웹팩 설정파일을 만들어서 간편하게 사용하자.

웹팩의 실행모드

웹팩의 꽃 로더

웹팩의 아웃풋

웹팩의 플러그인 도입

React 와 Webpack 결합하기

프로젝트 생성

React

Babel

@babel/core

@babel/preset-env

@babel/preset-react

babel-loader

webpack

webpack

webpack-dev-server

webpack-cli

html-loader, css-loader, sass-loader

html-webpack-plugin, mini-css-extract-plugin

Redux_01.

0개의 댓글