CRA를 통해 하면 좋은 점은 무엇인가?
webpack babel 설정을 따로 안해줘도 되는 편리함
코드의 양이 많아지면 ~~<script>...</script> 무한 스크롤...~~ 코드의 유지와 보수가 쉽도록 코드를 모듈로 나누어 관리하는 모듈 시스템이 필요
JavaScript는 언어 자체가 지원하는 모듈 시스템이 없습니다. 이런 한계를 극복하려 여러 가지 도구를 활용하는데 그 도구 가운데 하나가 webpack
Webpack??
FE 프레임워크에서 제일 많이 쓰이는 모듈번들러
각각의 모듈들에 대해 의존성 관계를 파악하여 그룹핑 해주는데, 이 걸 통해서 여러개로 나뉘어 있는 파일들을 하나로 파일로 묶어줘 불편한 점 해소시켜준다.
프레임워크로 작업할 시 내장되어 있는 모든 자원을 번들링 해준다
(*참고로 웹팩의 주요 네 가지 개념은 엔트리, 아웃풋, 로더, 플러그인)
webpack.config.js
module.exports = {
entry: {
main: './src/main.js',
},
output: {
filename: 'bundle.js',
path: './dist',
},
}
// entry 키에 시작점 경로를 지정한다
// 현 프로젝트에서 자바스크립트 시작점은 src - main.js 코드
// entry에 설정한 자스 파일을 시작으로 의존되어 있는 모든 모듈을 하나로 묶는다
// 번들된 결과물을 처리할 위치는 output에 기록한다
// dist 폴더의 bundles.js 파일로 결과를 저장한다index.html
<body>
<script src='./dist/bundle.js'></script>
</body>
// html파일에서는 번들링된 이 파일을 로딩한다 여기까지 webpack 으로 번들링 하는 과정!
(터미널에 webpack 커맨드라인으로 빌드 하기 가능 )
하위 목록으로 로더 플러그인 알아보자
로더
webpack은 모든 파일을 모듈로 관리한다
자바스크립트 파일 + 이미지 + 폰트 + 스타일시트도 전부 모듈로 관리한다
그런데 webpack은 자바스크립트 밖에 모른다?????
아! 그래서 자바스크립트 파일을 웹팩이 이해하도록 변경해야 한다!!!!
요 역할을 로더가 한다 요것이
Babel???
로더는 test / use 키로 구성된 객체로 설정할 수 있다
test: 로딩할 파일을 지정 / use: 적용할 로더를 성정
간단한 예가 babel-loader
es6에서 es5로 변환할 때 바벨을 사용할 수 있는데 test에 es6로 작성한 자바스크립트 파일을 지정하고, use에 이를 변환할 바벨 로더를 설정한다
webpack.config.js
module.exports = { //module export (옛날 방식..)
module: { //javascript 모듈을 생성할 규칙 지정
rules: [
{
test: /\.js$/, //.js, .jsx로 끝나는 babel이 컴파일하게 할 모든 파일
exclude: "node_modules", // node module 폴더는 babel 컴파일에서 제외
use: {
loader: "babel-loader",
options: {
presets: ["env"],
}
]
}
}
// ES6 > ES5로 변환한 과정
// test에 자바스크립트 확장자를 갖는 파일을 정규표현식으로 지정
// use에 babel-loader 로더를 설정한다
로더를 사용하기 위해선 노드 패키지로 제공하는 로더를 추가해야 한다
npm i --save-dev babel-loader babel-core babel-preset-env
기타 css 파일을 자바스크립트로 변환해서 로딩하려는 로더는
css-loader style-loader
Plugin
로더는 파일단위로 처리하지만 플러그인은 번들된 결과물을 처리한다
번들된 자바스크립트를 난독화 혹은 특정 텍스트를 추출하는 용도로 사용 가능하다
[참고 사이트]
https://jeonghwan-kim.github.io/js/2017/05/15/webpack.html
https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html
이어서...
webpack 까는 이유 하나씩..
- package.json
npm init
1.react
npm install react react-dom
react: 리액트 라이브러리 / react-dom: browser, dom, webapp 관리
2.babel
npm install --save-dev @babel/core babel-loader @babel/preset-react @babel/preset-env
@babel/core: 리액트는 es6 사용 중.. 여러 브라우저에서 사용하기 위해
es5로 변환해준다
@babel/preset-react: jsx 문법을 javascript로
@babel/preset-env: es6 + 브라우저에 따라 알아서 컴파일 해준다
이게 무슨 말이냐.. 이 것만 사용하면 오랜된 브라우저에게 제공하는 코드 길이가 너어어무.. 길어진다.... 모든 옛날 브라우저를 지원할 필요가 있는가?? 놉..
그래서 babel/preset-env는 원하는 브라우저만 지원 가능하도록 플러그인을 선택할 수 있음
[참조]: https://velog.io/@pop8682/번역-왜-babel-preset이-필요하고-왜-필요한가-yhk03drm7q
babel-loader: 자스 파일을 babel preset/plugin과 webpack을 사용하여 es5로 변환해줌
- webpack
npm install --save-dev webpack webpack-dev-server webpack-cli html-webpack-plugin
webpack: 모든 리액트 파일을 하나의 컴파일된 하나의 자스 파일에 넣어줌
webpack-dev-server: live reload
webpack-cli: build 스크립트를 통해 webpack 커맨드를 사용하기 위해
html-webpack-plugin: 나중에 webpack.config.js에 사용할 플러그인
—save-dev: 개발환경에서만 사용되는 라이브러리라는 것을 명시
????
src: react 작업을 위한 폴더
dist: 번들링 결과물의 폴더
public: 정적 파일을 위한 폴더
