[React] webpack 설정하기

• 웹팩의 설치와 설정

1. node 설치
2. VS code 에서 프로젝트 폴더를 생성하고 터미널을 연다.
3. npm init 을 입력하여 프로젝트를 초기화 한다. (npm : 노드패키지매니저)
4. npm i react react-dom 을 입력하여 설치한다.
5. npm i -D webpack webpack-cli 를 입력하여 설치한다. (-D : 개발용)
6. npm i -D @babel/core @babel/preset-env @babel/preset-react @babel-loader

• webpack 설정 파일

7. 프로젝트 폴더에 webpack.config.js 를 생성한다.

const path = require("path");

module.exports = {
  name: "project-name", 		// 모듈이름
  mode: 'development', 			// 배포시 : production
  devtool: "inline-source-map", // 소스맵 생성 여부와 방법을 제어
  resolve: {					// 모듈을 해석하는 방식 
    extensions: [".js", ".jsx"],
  },
  entry: {	// file.js 를 대상으로 웹팩이 빌드를 수행
    app: ["./file.js"],
  },
  module: {
    rules: [
      {
        // babel-loader를 이용해 규칙에 적용
        test: /\.jsx?/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
    ],
  },
  // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
  },
};