설정 파일 도입하기

SPANKEEE·2022년 1월 4일
0

웹팩

목록 보기
2/7

이전에 사용한 터미널 명령어를 다시 확인해보자

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

설정파일을 사용함으로써 간단하게 웹팩을 사용할 수 있다.

profile
해야되요

0개의 댓글