Webpack 이란??

---

Webpack 이란?

필요한 다수의 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어 주는 것을 webpack이라 한다.(모듈 번들링)

 

사용하는 이유

• SPA 하나의 html 페이지에 여러 자바스크립트 파일을 포함하는데 연관되는 자바스크립트 파일들을 하나의 파일로 묶어줘서 관리하기 편하다
• 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다.

Babel 이란?

최신 자바스크립트 문법(ES6)는 구버전 브라우저에서 이해하지 못하기 때문에 babel이 구버전 브라우저가 이해할 수 있는 문법으로 변환해준다.

 

Webpack 기본 세팅시 필요한 명령어

npm init -y
 
npm i webpack --save-dev
 
npm i -D webpack-cli

 

이렇게 설치가 되었다면 자바스크립트 설정 파일을 만들어 줘야 한다.

webpack을 만들 최상위 경로에 webpack.config.js 라는 파일을 만들어 준다.

 

const path = require("path");
const Refreshplugin = require("@pmmmwh/react-refresh-webpack-plugin");
module.exports = {
  name: "wordrelay-setting",
  mode: "development", // 실서비스 production
  devtool: "eval",
  resolve: {
    extensions: [".js", ".jsx"],
  },
 
  entry: {
    app: ["./client"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: [
            "@babel/plugin-proposal-class-properties",
            "react-refresh/babel",
          ],
        },
      },
    ],
  },
  plugins: [new Refreshplugin()],
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
    publicPath: "/dist/",
  }, // 출력
  devServer: {
    publicPath: "/dist/",
    hot: true,
  },
};

 

알아야 할 구조는

 

• path: 파일의 경로를 다루고 변경하는 유틸리티
• entry: build의 대상이 될 파일(여러 자바스크립트 파일들)
• output: build의 결과를 저장할 경로(하나의 파일)
• plugin: build된 bundle 파일을 동적으로 html에 추가 할 수 있으며 build 시에 html, css, javascript 등 의 파일을 난독화 및 압축할 수 있다.

Loader이란?

자바스크립트가 아닌 파일들도 유효한 모듈로 변환 시켜준다.

loader에 대한 설정을 싱글 모듈에 대한 rules 프로퍼티를 정의 해야하며 rules 프로퍼티는 test와 use 프로퍼티를 필수로 가지고 있어야 한다. test 프로퍼티는 변환해야하는 파일 또는 파일들을 식별하는 역할을 한다. use 프로퍼티는 변환되어야 하는 파일에 대하여 어떤 로더를 사용해야하는지 설정합니다

 

정리

웹팩은 entry로 설정된 시작점에서 의존성을 가진 모든 파일을 압축하여 output 지점에 하나의 자바스크립트 파일을 만들어 준다. 이때, 자바스크립트가 아닌 파일은 loaders를 이용하여 자바스크립트에서 이용가능한 모듈로 만들어 주며, plugins를 이용하여 번들된 자바스크립트를 난독화하거나 특정 텍스트를 추출하는 역할을 한다. mode는 웹팩의 사용 목적에 따라 설정을 지정하는 역할을 한다.

 

 

참고링크 

프론트엔드-필수-Webpack이란

웹팩이란-무엇인가