basic react webpack babel 설정

기본적인 React Webpack Babel 설정을 연습, 기록한다.

프로젝트 구성

• 프로젝트의 메타 정보를 관리할 pakage.json 파일을 프로젝트 루트에 생성한다.

$ npm init --yes

React 기본 프로젝트 코드 작성

1. react와 react-dom package를 설치한다.

$ npm i react react-dom

2. 프로젝트 폴더 구성

Webpack 설정

1. webpack package 설치

• Webpack 개발 서버 환경을 구성하기 위한 의존 패키지를 설치한다.
• 개발 서버에서만 사용할 것이므로 -D 속성을 붙여준다.

$ npm i -D webpack webpack-cli webpack-dev-server dotenv rimraf

2. 환경 변수 추가

• 프로젝트 루트 위치에 .env파일을 생성하고 전역 환경 변수를 설정한다.
• 이 .env는 git repository에 올라가지 않도록 .gitignore에 추가한다.
• 환경변수는

PORT=3500

3. Webpack 폴더 구성

.
├── config/
│   ├── webpack.config.dev.js
│   └── webpack.config.server.js
├── dist/
├── src/
├── package-lock.json
└── package.json

4. 개발용 webpack 구성 파일 작성

• webpack.config.dev.js
• webpack.config.server.js

webpack.config.dev.js

require('dotenv').config();

const path = require('path');
const __ROOT = process.cwd();
const webpack = require('webpack');
const serverConfig = require('./webpack.config.server');

module.exports = {
  target: 'web',
  context: __ROOT,
  mode: 'development',
  devtool: 'eval',
  devServer: serverConfig,
  entry: {
    main: path.join(__ROOT, './src/index.js'),
  },
  output: {
    path: path.join(__ROOT, './public'),
    filename: 'js/[name].bundle.js',
    chunkFilename: '[id].chunk.js',
    publicPath: '/',
  },
	resolve: { extensions: ['.js', '.jsx', '.json'] },
	plugins: [
    new webpack.DefinePlugin({
      process: {
        env: {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
        },
      },
    }),
  ],
};

webpack.config.server.js

const path = require('path');

module.exports = {
  // 정적 콘텐츠를 제공 할 위치를 서버에 알립니다.
  contentBase: path.join(process.cwd(), './public'),

  // 요청을 수신할 포트 번호를 설정합니다.
  port: process.env.PORT,

  // 인덱스로 설정할 파일 이름을 설정합니다.
  index: 'index.html',

  // 컴파일러 오류 또는 경고가있을 때 브라우저 화면에 오류 내용을 덮어씁니다.
  overlay: true,

  // 생성된 파일의 gzip 압축을 사용합니다.
  compress: true,

  // Hot Module Replacement 기능을 활성화 합니다.
  hot: true,

  // contentBase 옵션에서 제공하는 파일을 감시하도록 서버에 설정합니다.
  // 활성화 되면 파일 변경으로 전체 페이지 다시 로드 합니다.
  watchContentBase: true,

  // 알려진 바에 의하면 node_modules를 watchOptions 항목에서 제외하지 않을 경우
  // CPU 과부하 문제가 발생할 수 있습니다.
  // https://github.com/facebookincubator/create-react-app/issues/293
  watchOptions: {
    ignored: /node_modules/,
  },

  // Webpack Dev Server의 자체 로그는 일반적으로 유용하지 않습니다.
  // 로그를 보지 않도록 설정하거나, 너무 장황하지 않도록 'silent' 값을 설정합니다.
  clientLogLevel: 'none',

  // 터미널에 오류 정보만 간략히 표시하도록 설정합니다.
  stats: 'errors-only',

  // HTML5 History API를 사용하는 경우, index.html 페이지가 404 응답 대신 제공 되어야 합니다.
  historyApiFallback: true,

  // 실제 디스크에 파일을 쓰기합니다. (파일 생성)
  writeToDisk: true,
};