0%

react webpack babel 활용한 개발 빌드 환경 구축

Posted on Edited on

webpack 과 babel 을 활용한 react 개발환경 설정을 정리합니다.

의존성 설치

1
2
3
npm install @babel/core @babel/preset-env @babel/polyfill @babel/preset-react @babel/plugin-proposal-class-properties -D
npm install webpack webpack-cli webpack-dev-server -D
npm install babel-loader css-loader html-webpack-plugin -D

바벨 라이브러리
@babel/core 바벨 사용필수 라이브러리
@babel/preset-env es5 트랜스파일러
@babel/polyfill es6 의 새로운 객체와 메소드 사용 가능 처리
@babel/preset-react 리액트 jsx를 위한 라이브러리
@babel/plugin-proposal-class-properties class 를 사용 가능처리

웹팩 라이브러리
webpack 웹팩 사용필수 라이브러리
webpack-cli 웹팩 커맨드라인 인터페이스 라이브러리
webpack-dev-server 웹팩 개발서버 라이브러리
babel-loader 바벨과 웹팩을 이용해 자바스크립트 파일을 트랜스파일
css-loader css 파일을 import, require 할수있게 함
html-webpack-plugin 웹팩 번들에 html을 제공할수있는 라이브러리

.babelrc

babel 을 사용하려면 .babelrc 파일이 필요합니다.

1
2
3
4
5
6
7
8
9
10
/.babelrc
{
  "presets": [
    "@babel/preset-env", 
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

webpack.config.js

웹팩은 webpack.config.js 파일이 존재하고, 이 파일을 토대로 동작합니다.
이 파일에서 babel, bundle, dev server 설정을 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const port = process.env.PORT || 8080;

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist'.
    filename: 'bundle.[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: 'style-loader'
      }
    ]
  },
  plugins: [
    new HtmlwebpackPlugin({
      template: 'public/index.html,
      favicon: 'public/favicon.ico
    })
  ],
  devServer: {
    host: 'localhost',
    port: port,
    open: true,
    historyApiFallback: true
  }
};

scripts 수정

webpack 을 통해 build 와 start 를 하도록 변경합니다.

1
2
3
4
5
6
7
8
9
10
11
/package.json
{
  ..
  ..
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --mode production"
  }
  ..
  ..
}

npm start 를 통해 webpack dev server 에서 앱이 실행되는것을 확인할 수 있습니다.
npm run build 를 통해 dist 경로에 build 된 index.html 과 js 파일도 확인할 수 있습니다.