[React] 🧶Webpack 사용법

▷ Webpack이란?

프론트엔드 애플리케이션 배포를 위해서
가장 많이 사용하고 있는 번들러이다.

Webpack은 하나의 시작점(ex. index.js)에 의존성을 가지는
모듈을 모두 추적하여 하나의 결과물을 만들어낸다.

❓모듈 번들러?
여러 개의 파일을 하나의 파일로 합쳐주는 것을 모듈 번들러라고 한다.
HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고,
이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이다.

❓왜 사용?
두 개의 .js 파일에서 같은 변수를 사용하고 있을 때 생길 수 있는
변수 간 충돌을 일어나지 않게 해주며, 번들 파일 사이즈를 줄여주어
인터넷 속도가 느린 국가의 모바일 환경에서도 잘 사용할 수 있다.

즉, 소프트웨어를 잘 만들어도 사용자에게 배포하기 위해서는 번들링은 꼭 필요하다.

❗️참고) Webpack에서의 모듈은 JavaScript의 모듈에만 국한하지 않는다. HTML, CSS, 혹은 .jpg나 .png 같은 이미지 파일들도 전부 포함한 포괄적인 개념이다.

---

▷ Webpack 뜯어보기

🧶 빌드와 번들링

빌드
npm run build를 실행하면 React build 작업이 진행되고,
index.html 파일에 압축되어 배포에 최적화된 상태를 제공해 준다.

번들링
파일을 묶는 작업 그 자체를 말한다.
파일은 의존적 관계에 있는 파일들(import, export)
그 자체 혹은 내부적으로 포함 되어 있는 모듈을 의미한다.

---

🧶 웹팩의 핵심 개념

− Entry : 번들링을 원하는 위치
− Output : 번들링의 결과물
− Loaders
− Plugins
− Mode
− Browser Compatibility

− Webpack Dev Server
− Clean Webpack Plugin

---

🧶 Target

다양한 환경과 target을 컴파일한다.

module.exports = {
  target: ["web", "es5"], // 기본값이 web
  // 작성된 코드를 es5 버전으로 컴파일 하겠다고 지정한 것임
};

---

🧶 Entry

Entry point

webpack에서의 entry는 프론트엔드 개발자가
작성한 코드의 "시작점"으로 이해하면 편하다.

Webpack은 Entry point를 기반으로 직간접적으로
의존하는 다른 모듈과 라이브러리를 찾아낼 수 있다.

//기본 값
module.exports = {
	...
  entry: "./src/index.js",
};

-----
//지정 값
module.exports = {
	...
  entry: "./src/script.js",
};

/*
* 기본 값은 ./src/index.js이지만,
* Entry 속성을 설정하여 다른 (또는 여러 entry point)를 지정할 수 있다.
*/

---

🧶 Output

생성된 번들을 내보낼 위치와 이 파일의 이름을
지정하는 방법을 webpack에 알려주는 역할을 한다.

const path = require('path'); // path 모듈을 사용해야 한다.

module.exports = {
	...
  output: {
    path: path.resolve(__dirname, "docs"), // 절대 경로로 설정을 해야 한다. 
    filename: "app.bundle.js",
    clean: true // 오래된 파일 없이 빌드에서 생성된 파일만 볼 수 있다.
  },
};

---

🧶 Loader

Webpack은 기본적으로 JavaScript와 JSON 파일만 이해한다.
그래서 loader를 사용하여 JavaScript, JSON이 아닌 파일을 불러온다.
(ex. CSS)

module.exports = {
	...
  module: {
    rules: [
      {
        test: /\.css$/, // 파일명이 .css로 끝나는 모든 파일에 적용
        use: [MiniCssExtractPlugin.loader, "css-loader"], // 배열 마지막 오른쪽 => 왼쪽 순으로 적용
        exclude: /node_modules/,
      },
    ],
  },
};

/*
* - test: 변환이 필요한 파일들을 식별하기 위한 속성(필수)
* - use: 변환을 수행하는데 사용되는 로더를 가리키는 속성(필수)
* - exclude: 바벨로 컴파일하지 않을 파일이나 폴더를 지정
*   (반대로 include 속성을 이용해 반드시 컴파일해야 할 파일이나 폴더 지정 가능)
*/

---

🧶 Plugins

플러그인은 번들링 과정 중에 개발자가 원하는
다양한 작업을 할 수 있도록 도와준다.

▷ html-webpack-plugin
번들링 과정 중 html 파일을 자신이 원하는
형태로 가공하여 번들에 포함할 수 있게 해준다.

// 설치 후 require로 가져와서 사용
npm i -D html-webpack-plugin

-----
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
};

/*
* 위의 예제에서 html-webpack-plugin 은 생성된 모든 번들을
* 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성해 준다.
* mini-css-extract-plugin은 CSS를 별도의 파일로 추출해
* CSS를 포함하는 JS 파일 당 CSS 파일을 작성해주게끔 지원한다.
*/

---

🧶 Optimization - 최적화

Webpack은 버전 4부터는 선택한 항목에 따라 최적화를 실행한다.

module.exports = {
  ...
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};

/*
* 최적화하기 위해 다양한 옵션이 지원이 되는데,
* 대표적으로 minimize와 minimizer 등을 사용한다.
* 
* - minimize: TerserPlugin 또는 optimization.minimize에
*             명시된 plugins로 bundle 파일을 최소화(=압축)시키는 작업 여부를 결정한다.
* 
* - minimizer: defualt minimizer을 커스텀된
*              TerserPlugin 인스턴스를 제공해서 재정의할 수 있다.
*/

---

🧶 webpack-dev-server

변경되는 코드를 바로 반영해서(빌드된 것처럼) 볼 수 있다.

// 설치 후 사용
npm i -D webpack-dev-server

-----
/* webpack.config.js */
devServer: {
  static: {
    directory: path.resolve(__dirname, ‘dist’)
  },
  port: 3001, 
}

-----
/* package.json */
"script" : {
  "build": "webpack"
  "start": "webpack server --open --mode=development",
}
  
/*
* package.json의 script에 web pack server을 추가하면
* npm start로 실행시켰을 때, 변경되는 코드를 바로 반영해서(빌드된 것처럼) 보여준다.
*/

---

🧶 clean-webpack-plugin

기존 빌드를 통해 생성되었지만,
사용하지 않은 번들 파일을 지우고 싶은 경우 사용하는 플러그인이다.

// 설치 후 사용
npm i -D clean-webpack-plugin

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

Module.exports = {
  …
  Plugin: [new CleanWebpackPlugin()]
}

---

🧶 webpack.config.js 예시

module.exports = {
  target: ["web", "es5"], // 기본값은 web
  entry: "./src/script.js",
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "app.bundle.js",
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};

---

▷ Webpack 사용해 보기

🧶 start!

// package.json 생성하기
npm init -y

// 웹팩 설치하기
npm install -D webpack webpack-cli

---

🧶 webpack.config.js

번들링을 원하는 파일의 위치를 entry,
번들링의 결과물을 output이라고 한다.

// 웹팩 config 파일 작성(package.json이 있는 위치에 생성)
// path모듈을 불러와서 사용해야 한다.
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // './dist'의 절대 경로를 리턴한다.
    filename: 'app.bundle.js',
  },
};

// npx webpack으로 번들링하기
// package.json의 "scripts"에 "build": "webpack" 추가해 준다.

---

🧶 CSS를 번들에 포함하기

// 설치 후 사용
npm i -D css-loader style-loader

-----
/* webpack.config.js */
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
				// 파일명이 .css로 끝나는 모든 파일에 적용
        test: /\.css$/,
				// 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용
				// 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다.
				// 순서 주의!
        use: ["style-loader", "css-loader"],
				// loader가 node_modules 안의 있는 내용도 처리하기 때문에
				// node_modules는 제외해야 한다.
        exclude: /node_modules/,
      },
    ],
  },
};

// 이후 npm run build 명령을 통해 번들링이 잘 되었는지 확인하면 됨

---

🧶 HTML을 번들에 포함하기

npm i -D html-webpack-plugin

설치 후 webpack.config.js 파일에 해당 플러그인을 적용한다.
잘 적용되었으면, npm run build 로 결과를 확인한다.

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

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "app.bundle.js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new CleanWebpackPlugin(),
  ],
  devServer: {
    static: {
      directory: path.resolve(__dirname, "docs"),
    },
    port: 3001,
  },
};

🧤CRA 없이 Webpack으로 React 환경 구성하는 방법 보러가기
👉 Webpack(공식문서)
👉 Webpack(공식문서) - why webpack
👉 CSS에 minify를 적용하기 : mini-css-extract-plugin / css-minimizer-webpack-plugin
👉 WebpackManifestPlugin 사용법