코딩으로 만들어지는 js 부터 sass, png 등 수많은 다양한 파일(자원)들을 웹팩으로 처리하면 단순한 형태의 몇몇 파일로 만들어진다.
웹팩을 공부할 때 생각할 사항
- 다양한 형태의 자원들을 어떻게 웹팩한테 보낼 것인가?
- 그 자원들을 어떤 방법으로 가공할 것인가?
=> 최종적으로 개발이나 배포에 유리한 형태로 가공하는 것이 웹팩 사용의 흐름이다.
이 흐름을 컨트롤 하는 방법이 설정파일(webpack.config.js)이다.
설정파일 생성
지난 시간에 사용했던 npx webpack --entry ./source/index.js --output-path ./public --output-filename index_bundle.js 같은 명령어를 매번 쓰려면 편의성이 떨어진다.
설정파일을 이용하여 좀 더 쉽게 사용할 수 있다.
루트 경로에 webpack.config.js 파일을 생성한다.
설정파일에 대한 공식문서는 웹팩 홈페이지의 Documentation 카테고리의 Configuration 메뉴에서 확인 가능하고 webpack.config.js 파일에 대한 예시(아래 사진)도 확인 가능하다. 이 문서를 참조하면서 설정파일을 만들어나가면 된다. (https://webpack.js.org/configuration/)
설정
//<webpack.config.js>
const path = require('path');
module.exports = {
entry: "./source/index.js",
//entry에 해당 되는 파일 알려줌(--entry ./source/index.js 명령어와 같다.)
output: {
path:path.resolve(__dirname, "public"),
//__dirname이라는 경로의 public라는 최종 위치(디렉토리 이름) 지정.
filename: 'index_bundle.js' //output 될 파일명 지정.
}
}위의 설정이 npx webpack --entry ./source/index.js --output-path ./public --output-filename index_bundle.js 명령어와 같은 내용의 설정이다.
const path = require('path'); 는 node.js에서 파일의 경로를 쉽게 핸들링 할 수 있도록 제공하는 부품이다.
__dirname은 현재 파일이 위치하는 경로를 알려주는 node.js의 변수.
__dirname은 경로니까 그 옆에 최종 위치가 될 디렉토리명을 써준다.
설정을 마친 후에 npx webpack --config webpack.config.js 명령어를 입력하면 웹팩이 webpack.config.js 파일을 읽어서 이 파일에 적혀있는대로 동작하게 된다.
(이미 번들링 된 파일이 있다면 삭제하고 테스트 해보자)
웹팩을 사용하는 방법에는
1. 명령어에 옵션을 사용하는 방법(ex) --entry 등)과
2. config 파일에 지시 사항을 설정하는 방법이 있다.
(나머지 한 방법은 다른 강의에서 알려주신다고 한다.)
webpack.config.js 라는 약속된 이름으로 config 파일을 만들었다면 npx webpack 으로 웹팩을 실행하기만 해도 웹팩이 config 파일을 찾아서 내용을 읽어온다.
따라서 이제 npx webpack 만 입력해도 번들링이 실행된다!
