Webpack 의 주요 속성 소개

---

개인적인 Webpack 학습 및 공부 내용을 기록하기 위한 포스트입니다.

---

1. 실습코드

---

module.exports = {
  mode: "production",
  entry: "./js/app.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "main.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  stats: {
    colors: true,
  },
  devtool: "source-map",
};

1-1. Enty(webpack.config.js)

---

entry: './js/app.js',
}

1-2. app.js

---

import { sum } from "./math";
console.log("10 + 20 = ", sum(10, 20));

빌드를 할 대상 파일을 작성한다.

즉, entry 속성은 웹팩에서 우리가 빌드를 할 대상의 파일 경로를 작성하며 이는 웹팩 변환의 가장 먼저 동작하는 진입점이기도 하다.

위 코드에서는 해당경로의 app.js 에 작성된 것들을 빌드한다는 이야기로 해석하면 될 것이다.

참고사이트

https://joshua1988.github.io/webpack-guide/concepts/entry.html

2. Output

---

output: {
			path: path.resolve(__dirname, 'build'),
			filename: 'main.bundle.js'
	},

빌드를 하고 난 즉, 웹팩으로 변환을 진행한 최종 결과물을 정의하는 곳이다.

빌드 후에는 path 에서 정의한 위치에 build 폴더가 생성되고 그 밑에 main.bundle.js 결과물이 들어간 파일이 생성된다.

참고사이트

https://joshua1988.github.io/webpack-guide/concepts/entry.html

3. loader

---

entry 에서 output 으로 변환을 할때 영향을 미치는 부분

즉, 웹팩이 웹 애플리케이션을 해석할 때 사용하는 다양한 자원들 (HTML, CSS, Images, 폰드 등) 들의 변환을 도와주는 속성이다.

참고사이트

https://joshua1988.github.io/webpack-guide/concepts/entry.html