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

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

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 파일을

형식으로 연결해줍니다.

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(, document.getElementById("root"));

/src/components/App.jsx

import React from "react"; class App extends React.Component { render() { return ( Hello, React ); } } 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 를 시작할 수 있습니다!

from http://analogcoding.tistory.com/179 by ccl(A) rewrite - 2020-03-07 01:20:54