React Webpack 개념 및 설정

5/6/2022
읽는 시간 3분

웹팩(Webpack)이란?

모듈 번들링

한 프로그램으로 작동하는 하나의 파일을 여러 파일로 분할하고 구성할 수 있는 자바스크립트 모듈
→ 다수의 js 파일을 하나의 js 파일로 만들어주는 것

Webpack 사용 이유

SPA 사용 확대 : 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함되는 경우가 많아졌다.
관리의 이점 : 연관 되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다.
시간 단축 : 컴파일 시 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸리는데, 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다.
웹페이지 성능 최적화

Babel이란?

최신 ES6버전을 구 버전인 ES5로 변환해주는 역할.

최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못한다.
→ babel이 브라우저가 이해할 수 있는 문법으로 변환

ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상

Webpack 기본 명령어

Webpack 설치

$ npm install webpack webpack-cli html-webpack-plugin webpack-dev-server --save-dev

html-webpack-plugin : 웹팩으로 빌드한 결과물을 HTML 파일로 생성해주는 플러그인
webpack-dev-server : 웹팩으로 빌드 후 빌드한 파일을 서버로 띄어주는 역할

Webpack 설정 파일 생성

Webpack 기본 설정

 1const path = require('path');
 2const HtmlWebpackPlugin = require('html-webpack-plugin');
 3
 4module.exports = {
 5  entry: './src/index.js',
 6  mode: 'development',
 7  output: {
 8    path: path.join(__dirname, '/dist'),
 9    filename: 'index_bundle.js',
10  },
11};

entry : entry를 통해 Reack 파일이 시작하는 entry 포인트를 지정해주었다.
output : __dirname은 현재 디렉터리로, /dist 폴더에 번들링한 index_bundle.js 이름의 파일을 넣어주겠다고 명시.

babel 설정

 1module.exports = {
 2  module: {
 3    rules: [
 4      {
 5        test: /\.js$/,
 6        exclude: /node_module/,
 7        use: {
 8          loader: 'babel-loader',
 9        },
10      },
11    ],
12  },
13};

webpack 설정 내부에서 babel loader가 실행할 규칙을 지정하였다.

test : .js, .jsx로 끝나는 파일은 babel loader가 컴파일해준다고 명시
exclude : /node_module/은 babel 컴파일에서 제외

devServer 설정

 1module.exports = {
 2  devServer: {
 3    host: 'localhost',
 4    port: 3000,
 5    historyApiFallback: true,
 6    proxy: {
 7      '/api': {
 8        target: 'http://localhost:8000',
 9      },
10    },
11  },
12};

webpack-dev-server가 사용할 host와 port를 지정하였다.
proxy를 통해 /api로 접근하면 http://localhost:8000 서버에서 해당 요청을 받아주도록 설정!

Webpack 실행

1"scripts": {
2    "build": "webpack --config ./webpack.config.js",
3    "start": "webpack-dev-server --config ./webpack.config.js"
4  },

npm start : webpack.config.js 설정 파일을 이용하여 webpack-dev-server를 구동한다.
npm build : webpack.config.js 설정 파일을 이용하여 webpack 빌드를 수행한다.

전체 webpack.config.js 코드

 1const path = require('path');
 2const HtmlWebpackPlugin = require('html-webpack-plugin');
 3
 4module.exports = {
 5  entry: './src/index.js',
 6  mode: 'development',
 7  output: {
 8    path: path.join(__dirname, '/dist'),
 9    filename: 'index_bundle.js',
10  },
11  module: {
12    rules: [
13      {
14        test: /\.js$/,
15        exclude: /node_module/,
16        use: {
17          loader: 'babel-loader',
18        },
19      },
20    ],
21  },
22  devServer: {
23    host: 'localhost',
24    port: 3000,
25    historyApiFallback: true,
26    proxy: {
27      '/api': {
28        target: 'http://localhost:8000',
29      },
30    },
31  },
32  plugins: [
33    new HtmlWebpackPlugin({
34      template: './src/index.html',
35    }),
36  ],
37};

web frontend webpack react.js