React WebPack 으로 초기 설정하기!

CRA(create react app)로 리액트 프로젝트를 생성하는 방식이 아닌
우리가 직접 개발환경을 셋팅 해보기로 했다.

1. 프로젝트를 생성한다.

   project명
   ├── index.html
   └── src
   └── index.js

2. npm을 초기화

   npm init -y

3. webpack을 설치.

   npm install webpack-cli --save-dev

4. webpack 세팅을 위한 파일을 생성한다.

   touch webpack.config.js

5. webpack 초기 세팅을 해준다.

// path 모듈 불러오기
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
// 최종 번들링된 자바스크립트
filename: 'main.js',
// dist를 배포용 폴더로 사용
path: path.resolve(__dirname, 'dist')
}
}

entry: 배포 전 작업용 자바스크립트 파일
output: 최종 배포용 번들링 파일 설정

6. package.json에서 build 명령어를 셋팅.

   "scripts": {
   "build": "webpack"
   },

7. build가 잘 되는지 테스트.

   npm run build

dist 폴더가 생성된걸 확인할 수 있고,
내부에는 main.js 파일이 생성되어 있을것이다.
모든 자바스크립트 파일이 합쳐져서 main.js로 번들될 것이다.