# Webpack 초기 구성

## 1. NPM 초기화

`npm` 초기화(initialization) 명령을 사용해 프로젝트를 초기 구성합니다. (`package.json` 생성)

{% tabs %}
{% tab title="NPM 초기화 명령" %}

```bash
npm init -y
```

{% endtab %}

{% tab title="package.json" %}

```javascript
{
  "name": "euid-react-app",
  "version": "1.0.0",
  "description": "E.UID React App",
  "private": true,
  "scripts": {
    "start": "webpack"
  }
}
```

{% endtab %}
{% endtabs %}

![](https://1127883942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTbexhuB2p5ev8QaGgg%2F-MTuOA4DiObszzdMGXy4%2F-MTuPnPgBFe00v2EWi0U%2Fimage.png?alt=media\&token=137b8e40-68ce-445a-b0d1-86c884661106)

## 2. Webpack 설치 & 구성

[webpack](https://www.npmjs.com/package/webpack), [webpack-cli](https://www.npmjs.com/package/webpack-cli) 패키지를 설치한 후, `webpack.config.js` 파일을 만들어 구성합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i webpack webpack-cli -D
```

{% endtab %}

{% tab title="webpack.config.js" %}

```javascript
const path = require('path')
const getAbsolutePath = (pathDir) => path.resolve(__dirname, pathDir)

module.exports = (_env, argv) => {
  const isProd = argv.mode === 'production'
  const isDev = !isProd

  return {
    entry: {
      main: './src/index.js',
    },
    output: {
      path: getAbsolutePath('dist'),
      filename: 'assets/js/[name].[contenthash:8].js',
      publicPath: '/',
    },
    mode: 'development',
    devtool: isDev && 'cheap-module-source-map',
  }
}
```

{% endtab %}
{% endtabs %}

![](https://1127883942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTbexhuB2p5ev8QaGgg%2F-MTuRbPdetjvH8c3l_Lg%2F-MTuTcWcDOu0SqkLD1Y3%2Fimage.png?alt=media\&token=f525012b-7787-4fd6-a16a-0e435d164677)

## 3. React, ReactDOM 설치

[react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom) 패키지를 프로젝트에 설치합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i react react-dom
```

{% endtab %}
{% endtabs %}

## 4. 엔트리 파일 생성

엔트리 파일을 만든 후, React, ReactDOM 모듈을 불러와 간단한 React 코드를 작성합니다.

{% tabs %}
{% tab title="src/index.js" %}

```javascript
import React from 'react';
import ReactDOM from 'react-dom';

// React 요소
const app = React.createElement(
  'div', 
  { className: 'app' }, 
  'React App 매뉴얼 구성'
);

// DOM 노드
const rootNode = document.getElementById('root');

// DOM 노드에 React 요소 렌더링
ReactDOM.render(app, rootNode);
```

{% endtab %}
{% endtabs %}