이전에 사용한 터미널 명령어를 다시 확인해보자
npx webpack --entry ./source/index.js --output-path ./public --output-filename index_bundle.js
위 코드는 다시 적기엔 너무 길고 귀찮다.
webpack.config.js 설정파일 도입
웹팩 설정 파일을 생성해보자 최종 루트 폴더에 webpack.config.js 파일을 생성한다.
webpack.config.js 파일 내 아래 코드를 입력한다.
const path = require('path');
// 파일의 경로를 쉽게 핸들링 해줄 수 있게 도와주는 일종의 부품이라 생각한다.
module.exports = {
entry: "./source/index.js",
// 도입할 .js 위치
output: {
path: path.resolve(__dirname,"public"),
// dist 라는 하위 경로에 최종적인 경과물을 "public"에 놓아라
filename: 'index_bundle.js'
}
}
터미널 입력
터미널에 아래 명령어를 입력한다.
npx webpack --config webpack.config.js
웹팩이 해당 설정 파일을 읽어서 설정내용 대로 처리 한다는 뜻이다.
위 명령어를 입력하면 public 폴더 내에 index_bundle.js파일이 다시 생성된다.
설정파일이 생겼다면 이제 아래의 짧은 명령어를 입력해도 해당 설정파일의 방식으로 번들링이 된다.
npx webpack
설정파일을 사용함으로써 간단하게 웹팩을 사용할 수 있다.