[Webpack] 나에게 맞는 기본 세팅

나에게 맞는 webpack 세팅하기

1. NPM 초기화
   npm 초기화(initialization) 명령을 사용해 프로젝트를 초기 구성 (package.json 생성)

npm init -y

2. Webpack 설치 & 구성
   webpack, webpack-cli 패키지를 설치한 후, webpack.config.js 파일을 만들어 구성

예시 코드

npm i webpack webpack-cli -D // 설치

webpack.config.js -->

// Node.js 모듈 path 불러오기
const path = require('path')

// CommonJS 방식의 모듈 내보내기
module.exports = {
  // 엔트리 파일 설정
  entry: './src/index.js',
  // 아웃풋 파일 출력 설정
  output: {
    // 파일 이름
    filename: 'main.js',
    // 경로
    path: path.resolve(__dirname, './dist'),
  },
  // 번들링 모드 설정
  mode: 'development',
}

3. package.json에 scripts 부분에 명령어 추가하기
   "bundle": "webpack" 이렇게만 사용해도 npm run bundle 명령어 실행 시 dist 폴더에 번들링 된 결과가 나옴
   "start": "webpack-dev-server --config webpack.config.js" 이 명령어의 경우webpack.config.js파일에 따른 로컬로 실행 가능

  "scripts": {
    "bundle": "webpack",
    "start": "webpack-dev-server --config webpack.config.js"
  },

4. Babel CLI 설치
   @babel/core @babel/cli 패키지를 프로젝트에 설치하면 명령어 환경(CLI)에서 Babel 컴파일러를 사용할 수 있음

npm i -D @babel/core @babel/cli

5. Babel + Babel Loader 구성
   @babel/core, @babel/preset-env, babel-loader 패키지를 프로젝트에 설치한 후, Webpack 구성 파일의 모듈 규칙 안에 로더를 설정

npm i @babel/core @babel/preset-env babel-loader -D

6. 클래스 필드 선언
   ES 표준에 제안 된 클래스 필드 선언(class field declarations) 구문을 사용하면 클래스 문법 사용 시 편리하게 스태틱, 인스턴스 멤버를 추가해 사용할 수 있습니다. 하지만 이 기능을 현재 제안된 기술로 @babel/preset-env 사전 설정에는 포함되어 있지 않아 사용할 수 없음

npm i -D @babel/plugin-proposal-class-properties

npm install -D @babel/plugin-transform-runtime

8. CleanWebpackPlugin 및 HtmlWebpackPlugin 설치
   HtmlWebpackPlugin : HTML 파일 생성을 단순화
   CleanWebpackPlugin : Webpack에 의해 빌드 된 결과물을 자동 정리하는 플러그인을 활용하기 위해 clean-webpack-plugin 패키지를 프로젝트에 설치합니다.

npm install --save-dev html-webpack-plugin
npm install --save-dev clean-webpack-plugin

9. webpack 서버 설치

npm i webpack-dev-server

전체코드

webpack.config.js

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

module.exports = {
  entry: "./public/js/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/html/index.html",
    }),
  ],
  devServer: {
    static: "./dist",
    port: 9000,
    open: true,
  },
  devtool: "source-map",
  mode: "development",
  watch: true,
};