웹 팩으로 React 앱 구성을 마스터 링합니다

Create React App과 같은 도구에 의존하는 개발자는 Webpack에 직접적인 경험을하지 않았을 수 있습니다. 그러나 Webpack을 수동으로 구성하면 최신 웹 애플리케이션이 구축 및 번들로 제공되는 기본 메커니즘에 대한 귀중한 통찰력을 제공합니다.

이 안내서는 웹 팩이있는 React 애플리케이션을 처음부터 시작하여 명확하고 자세한 설명으로 완성하기위한 단계별 연습을 제공합니다.

웹 팩이란 무엇이며 왜 우리는 그것을 사용합니까?

Webpack은 강력한 모듈 Bundler입니다. CSS, 이미지 및 글꼴과 같은 다른 자산과 함께 모든 JavaScript 파일을 사용하여 처리 (예 : 전환, 미니딩)를 처리하고 브라우저에서 효율적으로로드 할 수있는 최적화 된 파일로 번들로 제공합니다.

React 프로젝트에서 Webpack은 다음을 도와줍니다.

.js 및 .jsx 파일 제작을위한 단일 또는 다중 최적화 스크립트로.
바벨을 사용하십시오 최신 JavaScript (ES6+) 및 JSX를 브라우저를 이해할 수있는 코드로 변환합니다.
프로세스 스타일, 이미지 및 기타 자산따라서 구성 요소에서 직접 가져 와서 사용할 수 있습니다.
Live Reload를 사용하여 로컬 개발 서버를 실행하십시오 -WebPack은 WebPack-Dev-Server와 같은 도구를 사용하여 로컬로 앱을 제공 할 수 있습니다. 이는 HMR (Hot Module Replacement) 또는 라이브 재 장전과 같은 기능을 제공하므로 파일을 저장할 때마다 전체 페이지 재 장전없이 브라우저가 자동으로 업데이트됩니다. 이는 개발 속도 및 피드백 루프를 향상시킵니다.

전제 조건

시작하기 전에 다음을 확인하십시오.

Node.js 및 NPM이 컴퓨터에 설치됩니다
React 및 JavaScript에 대한 기본적인 이해가 있습니다

터미널에서 다음 명령을 실행하여 Node.js 및 NPM이 설치되어 있는지 확인할 수 있습니다.

이 명령이 버전 번호를 반환하지 않으면 설치해야합니다.

공식 웹 사이트에서 Node.js (NPM 포함)를 다운로드하여 설치하십시오.

1 단계 : 프로젝트 폴더 설정

프로젝트 디렉토리를 만들고 초기화하십시오.

mkdir my-react-webpack-app
cd my-react-webpack-app
npm init -y

이로 인해 Package.json 파일이 생성되며 종속성 및 스크립트를 추적합니다.

2 단계 : 종속성을 설치합니다

반응과 반응

이들은 React 사용자 인터페이스를 구축하고 렌더링하는 데 사용되는 핵심 라이브러리입니다.

npm install react react-dom

웹 팩, 바벨 및 로더

코드를 묶고 변환하려면 웹 팩, 바벨 및 몇 개의 로더 및 플러그인이 필요합니다.

개발 종속성으로 설치하십시오.

npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev html-webpack-plugin css-loader style-loader

왜이 패키지인가?

웹 팩, 웹 팩 클리 -핵심 웹 팩 기능 및 명령 줄 인터페이스.
Webpack-Dev-Server – 더 빠른 개발을 위해 라이브 재 장전으로 로컬 서버를 돌립니다.
바벨 로더- Webpack은 JavaScript 및 JSX 파일을 전달하기 위해 Babel을 사용하도록 지시합니다.
@babel/core, @babel/preset-env, @babel/preset-react – 현대식 JavaScript를 컴파일하고 JSX 구문을 반응하는 데 필요한 Babel 패키지.
HTML-webpack-plugin – HTML 파일을 자동으로 생성하고 웹 팩 번들을 주입합니다.
CSS- 로더, 스타일 로더 – CSS 스타일을 React 구성 요소로 직접 가져오고 주입 할 수 있습니다.

3 단계 : babel 구성 (.Babelrc)

Babel은 REACT 코드에서 최신 JavaScript (ES6+) 및 JSX를 사용할 수있는 JavaScript 컴파일러입니다. 그런 다음 이전 브라우저와 호환되는 형식으로 코딩 할 수 있습니다.

Babel이 없으면 브라우저는 JSX 또는 새로운 JavaScript 구문을 이해하지 못할 것입니다. 특히 화살표 기능, 클래스, 옵션 체인 등과 같은 기능.

.babelrc 구성 파일을 만듭니다

다음 내용으로 프로젝트의 루트에 .babelrc 파일을 만듭니다.

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

설명

@babel/preset-env -이 사전 설정은 Babel에게 최신 JavaScript (ES6+)를 대상 브라우저에서 작동하는 버전으로 변환하도록 지시합니다. 환경 또는 브라우저 지원 구성을 기반으로 필요한 Babel 플러그인을 자동으로 결정합니다.
@babel/preset-react -이 사전 설정을 통해 Babel은 JSX 구문을 이해하고 트랜스 할 수 있으며, 이는 브라우저에서 기본적으로 이해되지 않습니다.

이것이 중요한 이유

React는 HTML처럼 보이지만 실제로 React.createElement () 호출을위한 구문 설탕 인 JSX를 사용합니다. 최신 JavaScript (Arrow 함수, Async/Await, Let/Const)도 모든 브라우저에서 지원되지 않습니다. Babel은 코드가 다른 환경에서 안정적으로 작동하도록합니다.

이러한 사전 설정을 사용하면 코드가 깨끗하고 현대적으로 유지되지만 오래된 브라우저와 여전히 호환됩니다.

4 단계 : 웹 팩 구성 (Webpack.config.js)

WebPack은 프로젝트 파일을 번들로, 로더를 통해 변환하고 배포를 위해 최적화 할 책임이 있습니다. 이제 React 코드 및 기타 자산을 처리하려면 WebPack을 구성해야합니다.

webpack.config.js 파일을 만듭니다

프로젝트의 루트 디렉토리에서 webpack.config.js라는 파일을 만들고 다음 구성을 추가하십시오.

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

module.exports = {
  // Entry point where the bundling starts
  entry: './src/index.jsx',

  output: {
    // Output directory for bundled files
    path: path.resolve(__dirname, 'dist'),
    // Name of the bundled file
    filename: 'bundle.js',
    clean: true, // Automatically clears previous build files in 'dist'
  },

  module: {
    rules: [
      {
        // Use Babel to transpile .js and .jsx files
        test: /\.(js|jsx)$/,
        exclude: /node_modules/, // Exclude 'node_modules' folder from Babel processing
        use: ['babel-loader'],
      },
      {
        // Process CSS files
        test: /\.css$/,
        use: ['style-loader', 'css-loader'], // Inject CSS into the DOM
      },
    ],
  },

  resolve: {
    // Extensions that can be omitted during import statements
    extensions: ['.js', '.jsx'],
  },

  plugins: [
    // Generate an HTML file and inject the bundled JS into it
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],

  devServer: {
    // Set the static directory to 'dist' where bundled files are stored
    static: path.resolve(__dirname, 'dist'),
    // Set the port for the development server
    port: 3000,
    open: true, // Open the browser automatically when the server starts
    hot: true, // Enable hot module replacement for live updates
  },

  mode: 'development', // Set to 'production' for optimized builds (minification, etc.)
};

설명

기입

항목 : ‘./src/index.jsx’ – 이것이 앱의 시작점입니다. WebPack은 여기에 지정된 파일에서 번들링을 시작합니다. 대부분의 React 프로젝트에서 이것은 일반적으로 index.jsx 또는 index.js입니다.

산출

경로 : Path.Resolve (__ Dirname, ‘Dist’) – WebPack이 번들 파일을 배치 해야하는 위치를 정의합니다. __Dirname은 루트 디렉토리를 말하고 ‘Dist’는 출력이 저장되는 폴더입니다.
filename : ‘bundle.js’ – 출력 파일의 이름을 지정합니다 (즉, 번들 JavaScript).
깨끗 : 사실 – 새 빌드 전에 출력 디렉토리가 지워지도록하여 이전 파일이 Dist 폴더에 남아있는 것을 방지합니다.

기준 치수

규칙 – 이들은 번들링 프로세스 중에 다른 파일 유형을 처리하는 방법을 정의합니다.
바벨 로더:
- 테스트 : /\. (js|jsx)$/ -이 정규식은 .js 및 .jsx 파일과 일치합니다.
- 제외 : / node_modules / – 불필요한 변환을 피하기 위해 Babel 처리에서 Node_Modules 폴더를 제외합니다.
- 사용: [‘babel-loader’] -Webpack에 Babel-Loader를 사용하여 Babel을 통해 JavaScript 및 JSX 파일을 변환하도록 지시합니다.
CSS 로더 및 스타일 로더:
- 테스트 : /\.css$/ – .CSS 파일과 일치합니다.
- 사용: [‘style-loader’, ‘css-loader’] -Style-Loader는 CSS를 DOM.CSS-Loader를 CSS로 처리하여 CSS를 JavaScript 파일로 직접 가져올 수 있습니다.

해결하다

확장 : [‘.js’, ‘.jsx’] -이 구성을 사용하면 모듈을 가져올 때 확장자를 생략 할 수 있습니다. 예를 들어, ‘./app’에서 앱 가져 오기; App.js 또는 App.jsx로 자동으로 해결됩니다.

플러그인

htmlwebpackplugin(템플릿 : ‘./public/index.html’) – HTML 파일 템플릿을 지정합니다. 플러그인은 HTML 파일을 생성하고 번들 JavaScript를 주입하여 브라우저에 대한 모든 것이 올바르게 설정되도록합니다.

Devserver

정적 : path.resolve (__ dirname, ‘dist’) – 정적 파일 (번들 출력)이 위치한 Webpack Devserver에 알려줍니다.
포트 : 3000 – 개발 서버가 실행되는 포트 번호를 정의합니다. 브라우저에서 앱에 액세스 할 수 있습니다
Open : True – 서버가 시작되면 기본 브라우저를 자동으로 엽니 다.
뜨거운 : 사실 – HMR (Hot Module Replacement)을 활성화하여 전체 페이지를 다시로드하지 않고 브라우저가 변경된 모듈을 업데이트 할 수 있습니다. 이것은 변경 사항을 즉시 적용하여 개발 경험을 향상시킵니다.

방법

모드 : ‘개발’ – 빌드 모드를 지정합니다. 개발에서 Webpack은 유용한 디버깅 기능을 제공하며 빌드 프로세스가 더 빠릅니다.
프로덕션으로 전환 할 때 Webpack은 코드를 미치고 사용되지 않은 코드를 제거하여 빌드를 최적화합니다.

이 구성이 필요한 이유

이 웹 팩 구성은 다음과 같이 보장합니다.

반응 JSX 파일은 Babel을 사용하여 변환됩니다.
CSS는 처리되고 올바르게 주입됩니다.
코드는 번들로 제공되며 개발 중에 라이브 업데이트가 제공됩니다 (Webpack-Dev-Server 덕분).
출력은 개발에 최적화되어 있으며 배포 할 준비가되면 생산을 쉽게 구성 할 수 있습니다.

5 단계 : 폴더 구조를 만듭니다

다음과 같은 폴더와 파일을 만듭니다.

my-react-webpack-app/
├── public/
│   └── index.html
├── src/
│   └── index.jsx
├── webpack.config.js
├── .babelrc
└── package.json

6 단계 : HTML 템플릿 쓰기 (public/index.html)

이 HTML 템플릿은 RECT 응용 프로그램의 기초 역할을합니다. WebPack 은이 템플릿을 사용하여 최종 HTML 파일을 생성하고 JavaScript 번들을 주입합니다.

public/index.html 파일을 만듭니다

공개 폴더에서 다음 내용이있는 index.html 파일을 만듭니다.

이 파일이 필요한 이유

웹 팩 번들링: htmlwebpackplugin을 사용하여 WebPack은 최종 JavaScript 번들 (Bhundle.js)을이 HTML 템플릿에 자동으로 주입합니다. 앱을 변경할 때마다 HTML 파일을 수동으로 업데이트 할 필요가 없습니다.
반응 장착: React 앱이 렌더링되는 DOM 요소이기 때문에 중요합니다. React는 ReactDom.Render를 사용합니다 (root.getElementById ( ‘root’))이 div에 루트 구성 요소를 장착하려면.

구조를 단순하고 집중시키는 것을 유지 함으로써이 파일은 웹 팩 및 React 설정의 간단하지만 필수적인 부분입니다.

7 단계 : React Entry 파일 생성 (src/index.jsx)

import React from 'react';
import { createRoot } from 'react-dom/client';
const App = () => ;
const container = document.getElementById('root');
const root = createRoot(container);
root.render();

8 단계 : package.json에 스크립트를 추가합니다

이 단계에서는 Package.json에 사용자 정의 스크립트를 추가하여 개발 서버를 쉽게 실행하고 프로세스를 빌드합니다.

package.json에서 스크립트 섹션을 업데이트하십시오

“스크립트”섹션 아래에있는 package.json 파일에서 다음 줄을 추가하십시오.

"scripts": {
  "start": "webpack serve --config webpack.config.js",
  "build": "webpack --config webpack.config.js"
}

설명

“시작”: “Webpack Serve -config webpack.config.js” -이 스크립트는 개발 서버를 실행합니다. NPM START (또는 원사를 사용하는 경우 원사 시작)를 실행하면 WebPack은 WebPack.config.js에서 WebPack-Dev-Server를 시작합니다. 일반적으로 액세스 할 수있는 로컬 서버에서 응용 프로그램을 제공합니다.
“빌드”: “웹 팩 —config webpack.config.js” -이 스크립트는 최적화 된 생산 빌드를 만드는 데 사용됩니다. NPM 실행 빌드 (또는 원사를 사용하는 경우 원사 빌드)를 실행하면 Webpack은 JavaScript, CSS 및 기타 자산을 번들로하고 코드를 미치고 Dead-Code 제거와 같은 최적화를 적용하여 앱을 더 빠르고 작게 생산합니다.