[JS] 바닐라 자바스크립트 개발환경 세팅 : babel, webpack, jest & stylesheet MIME type 에러

1. package.json 생성 및 npm install

package.json 생성
> npm init

# Webpack
npm install -D webpack webpack-cli
npm install -D webpack-dev-server
npm install -D style-loader css-loader
npm install -D html-webpack-plugin
npm install -D clean-webpack-plugin

# Babel
npm install -D @babel/core @babel/preset-env babel-loader

# Jest
npm install -D jest babel-jest

2. package.json 내용 수정 : npm 명령어 설정

{
   ...
  "scripts": {
    "test": "jest",
    "start": "webpack serve",
    "build": "webpack -w"
  },
   ...
}

3. webpack.config.js

root에 webpack.config.js 파일과 dist 폴더 생성

const path = require('path')
module.exports = {
    entry : './src/index.js',
    output : {
        filename : 'main.js',
        path : path.resolve(__dirname, 'dist')
    },
    mode : 'development',
    optimization : {minimizer:[]}
}

오류 : css 경로 찾기 실패

css 파일의 상대경로가 잘못된 줄 알고 8080 이후의 경로만 이리저리 고쳤음.

알고 보니 webpack에서 "style-loader", "css-loader"를 설정했기 때문에 번들링할 js 상단에 css를 import해면 되는 것이었음.

entry인 index.js가 모듈의 시작점이므로
index.js 파일 안에서 stylesheet를 import 해야 스타일 적용 가능함.
index.html에서 index.js와 style.css를 가져올 필요 없음.

참고 1 : https://leettle.tistory.com/4
참고 2 : https://velog.io/@kwonh/webpack-%EC%9B%B9%ED%8C%A9-%EA%B8%B0%EB%B3%B8%EC%84%A4%EC%A0%951-Loader%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0babel-loadercss-loaderstyle-loader