번들러(bundler)

초기화가 완료된 리엑트의 src/App.js는 다음과 같다.

import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
 
export default App;
 

   위 코드에서 import를 하는 부분은 원래 브라우저에는 없던 기능이다. 따라서 브라우저는 이런 기능을 사용하기 위해서 웹팩, Rarcel등의 번들러를 사용한다. 번들러를 사용하면 import로 불러온 모듈을 모두 합쳐서 하나의 파일을 생성한다. 또 최적화 과정에서 여러개의 파일로 분리 될 수 있다.

  2017년 부터 웹브라우저에서도 import사용이 가능 하지만 이는 단순히 다른 경로에 있는 js를 불러오는 용도만 있을 뿐 프로젝트 번들링과는 차이가 존재한다. 웹책을 사용하면 SVG, CSS파일을 불러와 사용할 수 있고 이는 file loader가 담당한다. 

    1. css-loader: CSS파일을 불러올 수 있게 한다

    2. file-loader: 웹 폰트, 미디어 파일 등을 불러온다

    3. babel-loader: js파일 들을 불러오면서 최신 js 문법으로 작성된 코드를 ES5문법으로 변환한다.

        *최신 js문법을 ES5로 변환하는 이유는 구형 브라우저가 최신 js문법을 지원하지 않기 때문이다. 또 한 JSX가 표준 js 문법이 아니기 때            문에 이 역시 ES5로 변환이 필요 하다.

  웹팩의 로더는 원래 직접 설치해야 하지만 create-react-app이 이 과정을 대신해 준다.