Webpack은 CSS, JS, JSX 등의 파일을 한데 모아서 쓰까버리는 모듈이다.
덕분에
<html>
<head>
</head>
<body>
<div id = "root"></div>
<script src = './dist/app.js'></script>
</body>
</html>
이렇게 하나만 땡그라니 html에 붙이면 모든 파일을 다 적용시킬 수 있게 된다.
바벨은 실험적인 문법들을 정통! 문법으로 변환시키거나, 최신 문법으로 작성된 자바스크립트를 브라우저와의 호환을 위해서 이전 버전의 문법으로 재작성 해주는 등의 역할을 하는 컴파일러이다.(개좋다)
기본적인 로더들의 사용 방법이 webpack 공식 사이트에 존재한다.
troubleshooting 같은 것도 있으니 참고하면 좋을 것으로 보인다.
- react
- react-dom
- @babel/core >> 기본적인 것이라고 하는데 아직은 뭔지 모르겠다.
- @babel/preset-env >> 브라우저 호환을 위한 프리셋
- @babel/preset-react >>
JSX
등의 문법을 JS에 맞게 변환
이 부분이 가장 어렵다.
설정해야하는 것들이 많은데,
어떤 설정 요소를 건드려야 하는지, 그 설정 요소를 어떻게 건드려야 하는지 알기가 쉽지 않기 때문이다.공식 문서도 길이가 꽤 길다...
const path = require('path')
module.exports = {
name: 'wordrelay-setting',
mode : 'development',
devtool : 'eval',
resolve : {
extensions : ['.js','.jsx']
},
entry: {
app: './client'
}, //입력
module : {
rules : [{
test : /\.jsx?/,
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: {
browsers: ['> 1% in KR'],
},
debug : true], '@babel/preset-react']
}
}],
},
output : {
path : path.join(__dirname + '/dist'),
filename : 'app.js',
}, //출력
}
요소를 조금씩 살펴보는 방식으로 보는 게 좋을 것 같다.
production
으로, 개발할 때는 development
로 바꾸라고 한다.Webpack has two modes of operations: development and production.
The main difference between them is that
production
mode automatically applies minification andother
optimizations to your JavaScript code.
예를 들어,
제로초는extionsions
로 모듈들의 확장자를 지정해 주었다.resolve에는 여러가지 option들이 있는 것으로 보인다.
그 밖에도 참고 할 만한 용법들이 있다.
module의 세부 사항에 대해서 설명해보자면,
우선 Rule은 조건 / 결과 / 세부 규칙 으로 나눌 수 있다.* 조건
the resource
에 적용되는test
,include
,exclude
the issuer
에 적용되는issuer
등이 있다.예를 들어,
import './style.css'
이app.js
에 적용되어 있다면, style file은 resource고 app.js는 issuer다.
* 결과
Rule 조건이 만족되면 사용되는 것이다.
- 적용될 loader : resource에 적용될 로더
- parser options : parser를 만드는데 사용되는 option을 뜻한다.
loader에 관련된 것은 :
loader
,options
,use
가 있다.
options나 presets 같은 것은 loader에 따라 달라지는 속성이다. 이 부분에 대한 설명은 babel 문서에서 확인할 수 있다. @babel/preset-env
* 세부 규칙
rules나 oneof 를 통해 조건에 걸렸을 때, 또 그 안에서 세부적인 규칙을 지정해 줄 수 있는 것으로 보인다.
현재로선 세부적인 사용법을 알 필요가 없을 것으로 보인다.
plugin 같은 것들이 또 있다.
로더가 변환 과정에 관여하는 반면, 플러그인은 변환 결과물의 형태를 입맛에 맞게 바꾸는 역할을 한다.
플러그인에 대한 설명