[Wecode] TIL_Day58

TIL 57일차 | 브랜디 기업 협업 3일차

09:30 | Brandi 클론 프로젝트 초기세팅
17:00 | 리뷰

오늘 한 일

webpack 내용 블로깅

Brandi 클론 프로젝트 초기세팅
- react
- babel
- absolute-path
- styled
- dev-server
- loader
- uglify

react webpack 세팅 하기

프로젝트 생성

mkdir webpack-react-tutorial && cd $_

코드를 작성하기 위한 디렉토리 생성

mkdir -p src

프로젝트 초기화

npm init -y

React, webpack, babel 설정 방법: webpack 설정하기

webpack과 webpack-cli 설치

npm i webpack webpack-cli --save-dev

package.json 안에 다음 내용 추가

"scripts": {
  "build": "webpack --mode production"
}

React, webpack, babel 설정 방법: babel 설정하기

babel preset env: 모던 자바스크립트를 ES5로 컴파일하기 위해 사용한다.
babel preset react: JSX와 기타 내용을 자바스크립트로 컴파일하기 위해 사용한다.

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

다음은 babel을 구성한다. .babelrc 파일을 프로젝트에 생성 후 아래 코드를 작성한다.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

이제 최소한의 웹팩 구성을 정의할 준비가 됐다. webpack.config.js파일을 만들고 아래 내용을 추가한다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

js, jsx 확장명을 가진 파일의 코드를 babel-loader를 통해 파이프한다. 이제 React를 작성할 준비가 되었다.

React, webpack, babel 설정 방법: babel 설정하기

React form을 표시하려면 HTML 페이지를 생성하도록 webpack에 지시해야 한다. 결과 번들은 <script>태그 안에 배치된다. webpack은 HTML처리를 위해서 html-webpack-plugin과 html-loader라는 두가지 추가 컴포넌트가 필요하다.

npm i html-webpack-plugin html-loader --save-dev

webpack’s configuration 업데이트 하기

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html',
    }),
  ],
};

src/index.html HTML 파일을 생성한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>How to set up React, Webpack, and Babel</title>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

React 컴포넌트가 HTML문서에 연결되도록 한다. src/js/components/Form.js를 열고 파일 맨 아래에 다음 코드를 추가한다.

const wrapper = document.getElementById('container');
wrapper ? ReactDOM.render(<Form />, wrapper) : false;

파일을 저장하고 빌드한다.

npm run build

dist 폴더 위치에 HTML 결과물이 있어야 한다. 웹팩을 사용하면 HTML파일에 Javascript를 포함할 필요가 없다. 번들은 자동으로 페이지에 injected된다.

dist/index.html을 브라우저에서 열면 React 폼을 볼 수 있다.

webpack dev server 설정 하기

파일을 변경할 때 매번 npm run build를 입력하기는 번거롭다. development서버를 시작하고 실행하기 위해서 세줄만 작성하면 된다.

webpack dev server를 설정하기 위해 다음 명령어로 패키지를 설치한다.

npm i webpack-dev-server --save-dev

package.json파일에서 start 스크립트를 추가한다.

"scripts": {
  "start": "webpack-dev-server --open --mode development",
  "build": "webpack --mode production"
}

저장하고 실행한다.

npm start

Published 26 Mar 2020

안녕하세요