220908(목)

# npm으로 폴더관리 시작
npm init -y

# webpack 설치
# -D는 --save-dev와 같으며 개발 의존성을 가지며 패키지가 설치된다.
# 빌드 시 배포용과 개발용을 나누기 위함이다.(굳이 배포용에는 이 패키지가 필요없기 때문!)
npm install -D webpack web-cli

# 바벨과 관련한 패키지 및 플러그인 설치
# babel-loader는 webpack으로 번들링할 때, 동시에 바벨로 트랜스파일링까지 하게 해주는
# 말 그대로 바벨을 불러와주는 녀석!!(웹팩에서 지원하는 다양한 loader들이 있다.)
npm install -D @babel/core @babel/cli @babel/preset-env babel-loader

# css-loader: webpack으로 js파일을 번들링할 때, js파일에 css를 모듈처럼 import하면
# css도 같이 번들링해주는 loader
# style-loader: css-loader로 번들링 후 해당 css 코드를 style 태그에 넣어주는 역할
npm install -D css-loader style-loader

{
  "name": "jaybnb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -w" # ⭐ npm run build -> webpack -w가 실행되게 해준다.
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/f-lab-edu/jaybnb.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/f-lab-edu/jaybnb/issues"
  },
  "homepage": "https://github.com/f-lab-edu/jaybnb#readme",
  "devDependencies": {
    "@babel/cli": "^7.18.10",
    "@babel/core": "^7.19.0",
    "@babel/preset-env": "^7.19.0",
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}

const path = require('path');

module.exports = {
  entry: './src/js/main.js', // 번들링의 입구(entry)가 되는 파일(이 파일에 여러 자바스크립트 모듈 파일을 import하자)
  output: {
    filename: 'bundle.js', // 번들링 후 생성될 js 파일
    path: path.resolve(__dirname, 'dist'), // __dirname은 nodeJS에서 현재 디렉토리를 나타낸다.
  },
  module: {
    // 번들링 시, 진행할 규칙들
    rules: [
      {
        test: /\.js$/,
        include: [path.resolve(__dirname, 'src/js')],
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  devtool: 'source-map',
  mode: 'development',
};

type: subject

body

footer

feat: Add abcdef
chore: Build dev-env