4. 설정파일 도입

INPUT -> PROCESS -> OUTPUT

웹팩을 공부할 때 따져봐야 할 부분
1) 어떻게 다양한 형태의 자원들을 웹펙에게 던져줄 것인가?
2) 그것들을 어떤 방법으로 가공할 것 인가?
3) 만들어진 결과를 개발하거나 배포하기 유리한 형태로 가공

webpack.config.js 파일을 만든다. 긴 명령어를 대체하기 위함

npx webpack --entry ./source/index.js --output ./public/index_bundle.js

위 명령어와 아래의 webpack.config.js는 같은 동작을 한다.

const path = require('path');

module.exports = {
    entry:"./source/index.js",
    output:{
        path:path.resolve(__dirname, "public"),
        filenmae:'index_bundle.js'
    }
}

__dirname는 현재 파일이 위치하고 있는 경로를 알려주는 node.js의 변수

output:{
    path:path.resolve(__dirname, "public")
}
// 현재 파일이 위치하고 있는 경로의 하위경로의 public에 최종적이 결과물을 가져다놓아라

아래의 명령어로 웹팩이 webpack.config.js를 읽고 그 내용대로 행동함

npx webpack --config webpack.config.js

웹팩을 사용하는 두 가지 방법
1) 커멘드 라인에서 명령어 행에서 옵션을 주는 방식으로 웹팩을 핸들링

npx webpack --entry ./source/index.js --output ./public/index_bundle.js

2) config 파일에 웹팩에게 시키고 싶은것을 적어서 시키기

npx webpack --config webpack.config.js

만약 파일의 이름을 webpack.config.js라는 약속된 이름으로 생성했다면

npx webpack

이렇게만 쳐도 웹팩이 webpack.config.js파일을 찾는다. => 번들링함