Webpack - React with typescript 초기 설정

웹팩이란 ? 

 

웹팩은 웹에서 사용되는 모든 자원(assets)을 번들링 해주는 도구입니다.
( 번들링이란 ? : 여러개의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정 )

즉 웹팩은 프로젝트 파일을 분석해서 자바스크립트 모듈과 관련 리소스들을 찾아 브라우저에서 이용할 수 있는
번들로 묶어서 패킹하는 모듈 번들러(Module bundler)입니다.

등장배경

 

여러 파일을  로딩하면 네트워크 비용이 증가하고 반응속도가 느려지게 됩니다.

또한 각 파일의 변수가 충돌할 위험이 존재합니다.

 

 

시작하기

 

먼저 프로젝트를 시작할 파일을 생성합니다.

mkdir webpack-practice

 

관련 package 설치를 위해 프로젝트에서  package.json 를 생성합니다.

npm  init -y

 

브라우저 지원을 위해 babel 설정을 진행합니다.

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader

@babel/core

@babel/preset-env : 브라우저에 최신문법을 지원합니다.

@babel/preset-react : JSX 와 같은 파일을 지원합니다.

babel-loader : 바벨과 웹팩 연결해줍니다.

babel-preset-env와 babel-preset-react와 같이 preset을 사용하고 싶으면

root폴더에 .babelrc을 생성하여 사용할 preset을 설정하면 됩니다.

 

plugin들을 각각의 npm dependency를 가지고 있습니다. 하지만 설치시 매번 .bablrc에 설정을 해야하므로

그 두가지를 모두 해결해줄 preset을 사용하면됩니다.

preset을 설치하고 설정하므로서 preset이 가진 plugin들을 설정할 필요없이 사용할 수 있게 됩니다.

( .babelrc 를 만들지 않고 webpack.config.js에 추가할 수도 있습니다. )

 

  module: {
    rules: [
      {
        test: /\.jsx?/, 
        exclude: /node_module/, 
        use: {
          loader: 'babel-loader', 
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/proposal-class-properties'],
          },
        },
      },
    ],
  },

바벨에 대한 내용은 좋은 레퍼런스를 첨부합니다.

https://www.zerocho.com/category/ECMAScript/post/57a830cfa1d6971500059d5a

(ECMAScript) BabelJS(바벨) - 7버전

 

이제 웹팩 설정을 위해 웹팩과 관련 모듈들을 설치합니다.

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

webpack

모든 리액트 파일을 하나의 컴파일된 하나의 자바스크립트 파일에 넣어주는 역할입니다.

webpack-dev-server

live reload 를 통해 수정사항을 바로 확인할 수 있습니다.

webpack-cli

build 스크립트를 통해 webpack 커맨드를 사용할 수 있습니다.

html-webpack-plugin

webpack.config.js에서 사용할 플러그인입니다.

기본적으로, bundle한 css, js파일들은 html파일에 직접 추가해야하는 번거로움이 있습니다.
html-webpack-plugin를 사용하면 이 과정을 자동화 할 수 있습니다.

 

Webpack은 기본적으로 source 코드를 bundle파일로 변환합니다.

loader가 부족하면 pluging을 사용하여 webpack의 기능을 추가해서 사용할 수 있습니다.

즉 필요한 plugin 설치로 프로젝트의 크기를 줄이고 최적화 시킬 수 있습니다. 이것이 Webpack의 핵심 기능입니다.

이제 webpack.config.js 를 생성합니다. webpack을 사용하기 위한 설정파일입니다.

const path = require('path')                                        
const HtmlWebpackPlugin = require('html-webpack-plugin')            

module.exports = {                                      
    entry: './src/index.js',                            // 리액트 파일이 시작하는 곳
    output: {                                           
        path: path.join(__dirname, '/dist'),            //__dirname : 현재 디렉토리, dist 폴더에 모든 컴파일된 하나의 번들파일을 만듭니다.
        filename: 'index_bundle.js'
    },
    module: {                                           // javascript 모듈을 생성할 규칙을 지정합니다.
        rules: [
            {
                test: /\.js$/,                          // babel이 컴파일하게 할 모든 파일을 설정합니다.
                exclude: /node_module/,                 //컴파일에서 제외할 파일을 설정합니다.
                use:{
                    loader: 'babel-loader'                
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'                // 생성한 템플릿 파일
        })
    ]
}

 

path
파일의 경로를 지정합니다.

__dirname : 노드 변수로 현재 모듈의 디렉토리를 리턴합니다.

 

HtmlWebpackPlugin

컴파일 이후 index.html 파일을 생성합니다.

template에 지정된 index.html에 모든 static 파일들을 긁어모은 index_bundle.js 파일을 

<script src='index_bundle.js'></script> 형식으로 연결해줍니다.

 

 

entry

컴파일 할 파일을 의미합니다.

 

output

컴파일 이후 파일입니다. (__dirname/dist/index_bundle.js)

 

module

모듈의 컴파일 형식

es6 문법을 es5으로 바꾸기 위해 webpack이 js, jsx를 포함한 모든 파일을 babel을 통하여 컴파일 시킵니다.

 

plugin

사용할 plugins 을 의미합니다.

여기서는 htmlwebpackPlugin을 사용하여 index.html과 index_bundle.js에 연결해줍니다.

 

TS , 리액트 프로젝트를 위해 React 및 React-DOM을 파일에 대한 종속성으로 추가하겠습니다.

npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom

이 @types/ 는 React 및 React-DOM에 대한 타입 선언부 파일도 가져오고 싶다는 것을 의미합니다. 

 

다음으로 ts-loader 및 source-map-loader 에 개발 시간 종속성을 추가 합니다.

npm install --save-dev typescript ts-loader source-map-loader

이 두 가지 모듈을 통해 TypeScript와 웹팩을 함께 사용할 수 있습니다. 

 ts-loader는 웹팩이 TypeScript의 표준 구성 파일인 tsconfig.json을 사용하여 TypeScript 코드를 컴파일하도록 돕습니다.

source-map-loader 는 자체 소스 맵을 생성할 때 TypeScript의 모든 소스 맵 출력을 사용하여 웹 팩에 정보를 제공합니다.

이렇게 하면 최종 출력 파일을 원래의 TypeScript 소스 코드를 디버깅하는 것처럼 디버깅할 수 있습니다.

 

(ts-loader는 typescript의 유일한 로더는 아닙니다.)

 

이제 cra 와 같이 src 구조 파일을 만듭니다.

 

/src/index.jsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("root"));

/src/components/App.jsx

import React from "react";

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, React</h1>
      </div>
    );
  }
}
export default App;

 

package.json 에서 스크립트를 수정합니다.

  "scripts": {
    "start":"webpack-dev-server --mode development --open --hot",                    // webpack-dev-server, --open : 자동으로 브라우저 열어줌, --hot : hot realod 저장했을 때 자동적으로 reload 해줌
    "build":"webpack --mode production"                                              // dist 폴더에 컴파일된 파일 다 넣어줌
  },

css 설정은 자신에 프로젝트에 맞는 plugin 을 설치합니다.

 {
        test: /\.scss$/,
        exclude: /node_module/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"] 
      } // 새로운 rule를 추가해줍니다.
    ]
  },
  
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new MiniCssExtractPlugin({  // 플러그인을 추가합니다.
       filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]

이제 webpack 으로 설정된 react 를 시작할 수 있습니다!