webpack 간단 설명

const path = require("path");

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"],
        },
      },
    ],
  }, //entry에 적용할 것들
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
  }, //출력
};

name :  해당 설정의 이름을 나타냄

mode : 개발 모드와 프로덕트 모드가 있다

devtool : 빠르게라는 뜻

resolve : 어떤 확장자를 바꿀지 정한다

 

entry : 해당 파일 내에 import 또는 require 되어있는 파일을 웹팩이 자동으로 추적하기 때문에 최상위 파일만 넣어도 된다

module : entry에 적용할 바벨을 설정

  - babel-loader : 웹팩에서 바벨을 적용하기 위해 필요

  - @babel/preset-env : 브라우저의 환경에 맞게 변경해주는 바벨

  - @babel/preset-react : jsx문법을 변경하기 위한 바벨

  - @babel/plugin-proposal-class-properties : 클래스 컴포넌트에서 constructor없이 state를 사용할 때 필요한 바벨

output : 어느 곳에 파일을 생성할지 정한다. node의 path 명령어를 사용하여 경로를 정하는 것이 좋다