Better Developer Experience

1. scss나 프론트엔드 쪽 javascript를 수정할 때마다 assets이 자동 업데이트 되도록 할것임.

watch fn을 쓸거임.

watch: scss나 프론트엔드 js에 수정하고 저장하면 바로 그 수정사항을 반영하여 refresh하고 compile함.

• webpack.config.js

//추가
module.exports ={
	watch: true,//이거 추가
}

-> 이렇게 하면 npm run assets에ㅡ대해 watch가 시작되고,다음과 같이 두 개의 콘솔을 실행시켜줘야함.
1. npm run dev
2. npm run assets

output - clean

clean: output 폴더를 build하기 전에 clean 해주는 거임.

• webpack.config.js

output: {
        filename:"js/main.js",
        path: path.resolve(__dirname, "assets"),
        clean: true,//이거 추가
    },

2. webpack.config.js파일을 저장할 때마다 nodemon(npm run dev) 이 재시작되는 버그를 고칠것임.

참고 자료 - nodemon

-> nodemon에게 몇가지 파일이나 폴더를 무시하는 방법을 알려줘야함. 방법은 두가지임
1. package.json파일에다가 설정하기 -> script: dev 쪽에다가 설정
2. nodemon.json파일 생성 후 ignore로 작성하기 -> nodemon.json파일 생성 고고

2번 방법

• 1. nodemon.json에 작성

{
    "ignore": ["webpack.config.js", "src/client/*", "assets/*"],// webpack.js와 src/client내에 있는 파일 그리고 assets 내에 있는 파일을 저장할 때는 nodemon 실행 X
    "exec": "babel-node src/init.js"// src/init.js를 저장할 때는 nodemon babel-node를 실행하겠다 O.
}

-> exec: execute = 실행하다. 즉, 노드몬을 이 때 실행할 것임. 이란 뜻임.

• 2. package.json 수정(위의 exec에 이미 뭘 실행할지 작성을 해줘서 script - dev수정해줘도 됨)

//변경 전
"scripts": {
    "dev": "nodemon --exec babel-node src/init.js",//nodemon에서 exec(실행하겠다) babel-node src/init.js 파일을.
    "assets": "webpack --config webpack.config.js"//webpack에서 webpack.config.js파일을 생성하여 실행하겠다는 뜻임.
}
// 변경 후
"scripts": {
    "dev:server": "nodemon",//nodemon만 실행해도 nodemon.json내의 exec를 실행해서 babel- node init.js를 실행함. -> nodemon은 기본적으로 nodemon.json파일을 찾아 실행함.
    "dev:assets": "webpack"// webpack을 실행하면, 기본적으로 webpack.config.js파일을 실행함.
}

nodemon은 기본적으로 nodemon.json파일을 찾아 실행함. 그러나
만약에 nodemon에서 다른 파일을 생성하고 싶다면, 명령어에 --config를 붙이면 됨.
ex) "assets": "webpack --config webpack.config.js"

1. npm run dev:server
2. npm run dev:assets

recap

-> client/js/main.js의 javascript코드는 babel loader가 변환해줌.(webpack안에 babel을 놓아둠으로써)

-> 우리가 할 대부분의 일든은 webpack과 관련이 없음. 대부분 framework에는 webpack이 내장되어 있기 때문. 그래도 혹시 모를 webpack설정이 있을 수 있기 때문에 배워놓음.