웹팩 사용하기

웹팩 소개

웹팩은 여러 다른 파일들을 받아서 하나의 파일로 묶어주는 모듈 번들러이다.

모듈을 하나라 묶어서 얻는 2가지 장점이 있다.

• 모듈성 : 프로젝트 마지막에 웹팩이 하나의 파일로 묶어주기 때문에 개발단계에서는 모듈화시켜서 관리할 수 있다.
• 네트워크 성능 : 여러 파일이 아닌 하나의 파일만을 공유하므로 네트워크 패킷이 줄어든다.
  
  

리액트 프로젝트 설정하기

1. 프로젝트 생성하기

npm init -y
npm install react react-dom serve

2. 컴포넌트를 모듈로 나누기

3. 웹팩 빌드 만들기

npm install --save-dev webpack webpack-cli

webpack.config.js 파일이 생성된다.
webpack.config.js 파일은 웹팩이 수행해야 하는 동작을 기술하는 자바스크립트 리터럴을 익스포트하는 모듈일 뿐이다.

var path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist', 'assets'),
        filename: 'bundle.js'
    }
};

다음으로는 필요한 바벨 의존 관계를 설치한다.

npm install babel-loader @babel/core --save-dev

특정 모듈을 실행할 때 사용할 로더 목록 정보를 webpack.config.js에 추가한다.
아래의 코드는 node_modules 폴더내의 *.js파일들을 실행할때 babel-loader 로더를 사용해라는 의미이다.

var path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist', 'assets'),
        filename: 'bundle.js'
    },
    // 추가한 부분
    module: {
        rules: [{test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader'}]
    }
};

이 시점에 바벨을 실행할 때 사용할 프리셋(preset)을 지정해야 한다.
먼저 프리셋부터 설치한다.

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

추가로 프로젝트 루트위치에 .babelrc파일을 만든다.

{
    "presets" : ['@babel/preset-env', '@babel/preset-react'];
}

웹팩은 정적으로 실행된다.
일반적으로 앱을 서버에 배포하기 전에 번들을 만든다.
번들명령어는 다음과 같다.
개발버전으로 번들하려면 production대신 development옵션을 사용한다.

npx webpack --mode=production

소스 맵

코드를 하나의 번들 파일로 만들면 브라우저에서 앱을 디버깅할 때 코드를 볼 수 없어서 곤란하다.
이럴 때 소스 맵을 사용하면 해결된다.

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist', 'assets'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader'}]
    },
    devtool: "#soure-map" // 이 옵션 추가
};

브라우저에서 확인하려면 개발자 도구 ➡️ Source 탭 ➡️ webpack:// 에서 확인할 수 있다.

create-react-app

위의 과정을 한번에 축약한 유명한 툴 체인이 있다.
바로 Create React App 툴 체인이다.

npx create-react-app my-app
cd my-app
npm start

[ 참고 ] : 러닝 리액트 2판