[React] Webpack - Plugin 사용

2022. 4. 18. 15:53·React/실험실
목차
  1. 1. Plugin? 
  2. 2. 프로젝트 준비 
  3. 3. html-webpack-plugin
  4. 4. DefinePlugin
  5. 5. ProvidePlugin
반응형

1. Plugin? 

Webpack의 Plugin은 로더보다 강력한 기능을 가지고 있다. 

로더는 특정 모듈에 대한 처리만 담당하지만 Plugin은 Webpack이 실행되는 전체 과정에 개입할 수 있다. 

 

2. 프로젝트 준비 

npm install webpack webpack-cli react react-dom
import React from "react";
import ReactDom from "react-dom";

const App = () => {
  return (
    <div>
      <h3>Webpack Plugin</h3>
    </div>
  );
};

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

테스트를 위해서 간단한 React 프로그램 코드를 작성하였다. 

 

npm install @babel/core @babel/preset-react babel-loader
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "[name].[chunkhash].js",             --- 1
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {                                            --- 2
        test: /\.js$/,      
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react"],
          },
        },
      },
    ],
  },
  mode: "production",
};

코드 컴파일을 위해서 패키지를 설치하고 webpack.config.js 파일을 만들어 babel 설정을 하였다. 

 

1 : chunkhash를 사용하면 파일의 내용이 수정될 때마다 파일 이름이 변경되도록 할 수 있다. 

2 : 자바스크립트 모듈을 처리하도록 babel-loader를 설정하였다. 

    babel.config.js를 통해서 설정할 수 있지만, 직접 설정할 수도 있다. 

 

3. html-webpack-plugin

Webpack을 실행해서 나오는 결과물을 확인하기 위해서는 HTML 파일을 수동으로 작성해야 한다. 

번들 파일의 이름에 chunkhash 옵션을 설정했기 때문에 파일의 내용이 변경될 때마다 HTML 파일의 내용도 수정해야

한다. 

 

이 작업을 자동으로 하는 플러그인이 html-webpack-plugin이다.

 

npm install clean-webpack-plugin html-webpack-plugin

clean-webpack-plugin은 Webpack을 실행할 때마다 dist 폴더를 정리한다. 

번들 파일의 내용이 변경될 때마다 파일의 이름도 변경되기 때문에 이전에 생성된 파일을 정리하는 용도이다. 

 

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  // ...
  
  plugins:[
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
          template:'./template/index.html'
      })
  ]
  
  // ...
};

template 옵션의 경로의 index.html 형식으로 webpack 결과물의 index.html 파일이 생성되게 작업하였다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack Plugin</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

간단하게 template 파일을 만들고 webpack을 실행하였다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Webpack Plugin</title>
    <script defer="defer" src="main.b2eb30d34981ce78b7dc.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

dist 폴더에 index.html 파일이 추가되고, 번들 파일이 script 태그로 자동으로 등록되었다. 

 

4. DefinePlugin

모듈 내부에 있는 문자열을 대체해주는 DefinePlugin이다. 

Webpack 내부에 내장된 플러그인이 때문에 별도로 설치할 필요는 없다. 

import React from "react";
import ReactDom from "react-dom";

const App = () => {
  return (
    <div>
      <h3>Webpack Plugin</h3>
      <p>{`웹 버전은 ${APP_VERSION}입니다.`}</p>
    </div>
  );
};

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

index.js에서 APP_VERSION 문자열을 원하는 문자열로 대체할 예정이다. 

 

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");

module.exports = {
  // ...
  
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./template/index.html",
    }),
    new webpack.DefinePlugin({
      APP_VERSION: "1.3.5",
    }),
  ],
  
  // ...
};

 

5. ProvidePlugin

자주 사용되는 모듈을 import 키워드를 사용해서 매번 가져오기는 귀찮다. 

ProvidePlugin을 사용하면 미리 설정한 모듈을 자동으로 등록해 준다. 이 Plugin도 Webpack에 기본적으로

포함되어 설치할 필요는 없다. 

// import React from "react";
import ReactDom from "react-dom";

const App = () => {
  return (
    <div>
      <h3>Webpack Plugin</h3>
      <p>{`웹 버전은 ${APP_VERSION}입니다.`}</p>
    </div>
  );
};

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

import React from "react" 코드를 주석하고 Provide를 사용해서 추가한다. 

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");

module.exports = {
  // ...
  
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./template/index.html",
    }),
    new webpack.DefinePlugin({
      APP_VERSION: "1.3.5",
    }),
    new webpack.ProvidePlugin({
      React: "react",
    }),
  ],
 	
  // ...
};
반응형
저작자표시 비영리 변경금지 (새창열림)

'React > 실험실' 카테고리의 다른 글

[React] MobX - 비동기화  (0) 2022.05.30
[React] Webpack - 심화  (3) 2022.04.28
[React] Webpack  (1) 2022.04.12
[React] Babel과 Polyfill  (0) 2022.04.06
[React] Babel - 깊은 설정  (0) 2022.04.05
  1. 1. Plugin? 
  2. 2. 프로젝트 준비 
  3. 3. html-webpack-plugin
  4. 4. DefinePlugin
  5. 5. ProvidePlugin
'React/실험실' 카테고리의 다른 글
  • [React] MobX - 비동기화
  • [React] Webpack - 심화
  • [React] Webpack
  • [React] Babel과 Polyfill
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    javascript
    네이버 부스트캠프
    리얼클래스
    ChatGPT
    redux
    자바스크립트
    ReactNative
    react
    바질
    CSS
    typescript
    타일러영어
    Babel
    알고리즘
    타입스크립트
    덤프
    영어회화
    next.js
    다이소
    바질 키우기
    영어독학
    webpack
    프로그래머스
    Docker
    Node.js
    리얼학습일기
    리액트
    식물
    네트워크
    CCNA
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[React] Webpack - Plugin 사용

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.