작성 동기

이번에도 블로그 제작 중 md를 읽기 위한 vue-markdown-loader 설치와 함께 webpack.config.js 생성 및 수정이 필요했고, 그 과정을 기록하려 한다.

시작 !

설정 파일

웹팩을 사용할 때에 반드시 설정파일이 필요하진 않다.
하지만 대부분 설정 파일을 사용한다.

웹팩 설정 파일을 사용하는 이유

• 터미널에서 웹팩 커맨드를 실행할 때 마다 모든 옵션들을 붙혀주는 것이 번거롭기 때문
• 설정 파일을 소스 저장소에 올려두면 다른 개발자들이 크게 설정에 신경쓰지 않고 협업을 할 수 있기 때문

1. 디렉토리를 만든 후 npn 프로젝트 초기화 후 웹팩 & 웹팩CLI 패키지를 설치
2. 웹팩에서 default로 인지하는 webpack.config.js 로 파일 생성하면 초기세팅 완료

$ nkdir webpack-config
$ cd webpack-config
$ npm init -y
$ npm i -D webpack webpack-cli
$ touch webpack.config.js

webpack.config.js

module.exports = {};

default 파일이름 대신 다른 이름을 사용할 경우 아래 처럼 --config 옵션을 추가하면 된다.

$ npx webpack --config [file_name]

entry 설정

웹팩은 기본적으로 여러 개의 자바스크립트 모듈을 하나의 파일로 묶어낸 번들러이다.
따라서 웹팩은 다른 모듈을 사용하고 있는 최상위 자바스크립트 파일이 어디 위치해있는 지 알아야 한다.
그러므로 설정 파일에서 이를 entry 속성으로 명시해준다.
웹팩은 이 entry 속성에 명시된 파일을 기준으로 의존성 트리를 만들어 하나의 번들 파일을 만들어 내게 된다. entry 설정의 기본값은 ./src/index.js 이다.

module.exports = {
	entry: "./src/script.js",
};

script.js 파일에 아래와 같이 간단한 문자열을 표시하는 js 코드를 작성

script.js

const message = document.createTextNode("웹팩 안녕");
document.body.appendChild(message);

그 후 터미널에서 npx webpack 커맨드를 실행하면 웹팩이 script.js 파일을 읽어들여 dist 폴더에 main.js 파일로 묶어낸다.

실제로 dist/main.js 를 확인해 보면
웹팩이 Uglify/Minify 어글리파이/미니파이 ? 를 통해 한줄의 코드로 바꿔놓았음을 확인할 수 있다.

output

위처럼 웹팩이 번들링 결과를 dist/main.js 파일로 묶어내는 이유는
설정이 dist/main.js 로 돼있기 때문이다.
webpack.config.js 의 속성인 output 을 이용하여 이 값을 다른 디렉토리와 파일로 변경이 가능하다.
entry 속성은 항상 프로젝트 디렉토리 안이기 때문에 상대경로지만,
output 은 항상 디렉토리 안이라는 보장이 없기 때문에 절대경로인 점에 주의해야한다.

webpack.config.js

module.exports = {
	entry: "./src/script.js",
    output: {
    path: __dirname,
    filename: "build.js",
    },
};

여기서 __dirname 은 nodeJS 에서 현재 프로젝트 디렉토리를 의미한다.
이제 웹팩을 실행하면 프로젝트 최상위 디렉토리에 build.js 파일이 생성된다.

개인적인 생각

dist/script.js 의 경로를 build.js 로 재정의하는 느낌인 것 같다.
사용하는 이유는 웹팩이라는 점을 고려하면 코드를 줄여 최적화시키려는 것인가..?

loader

웹팩은 JS 뿐 아니라 loader 를 이용하여 CSS, 이미지, 웹폰트, JSX, VUE 등 그 외 다양한 종류의 파일을 번들링할 수 있다.
웹팩에서의 가장 강력한 기능이라고 한다.

자주 사용되는 CSS 파일에 대해 설정해보자.

$ npm i --D style-loader css-loader

그 후 적용할 style.css 파일을 생성한다.
그리고 script.js 파일에서 style.css 파일을 임포트 한다.
주의사항 style.css 앞에 반드시 ./ 를 붙혀 주어야 한다.
그렇지 않으면 최상위 디렉토리가 아닌 node_modules 디렉토리를 찾는다.

script.js

import "./style.css";

const message = document.createTextNode("webpack Example");
document.body.appendChild(message);

마지막으로 css 파일이 설치한 두개의 모듈(loader)에 의해 처리 되게끔 웹팩 설정을 해주어야 한다. 설정 파일에 module 속성 추가 후 안에 rules 속성으로 처리규칙을 등록한다.
test 항목에 정의된 정규식에 매칭되는 파일은 use 항목에 등록된 loader 를 통해 처리된다. 아래 예제에서는 CSS 파일 처리를 위해 test 항목에 정규식으로 .css 파일만 인식하도록 설정하고, use 항목에 style-loader 와 css-loader 를 차례로 나열했다.

webpack.config.js

module.exports = {
	entry: "./src/script.js",
    output: {
    path: __dirname,
    filename: "build.js",
    },
    module: {
	    rules: [{
        	test:/\.css$/,
            ues:["style-loader", "css-loader"],
            }],
    },
};

다시 웹팩을 실행 후 index.html 파일을 브라우저에서 열어보면 style.css 가 적용됨을 확인할 수 있다.

마치며..

웹팩은 프로젝트를 최적화한 후 패키징하여 배포하는 과정(?)인가 했는 데 생각보다 뭐가 더 많다. 언젠간 웹팩에 대한 개념도 알아 볼 날이 올거라 생각된다.

해당 게시물은 개발자 달레서 님의 블로그에서 발췌 후 인용하여 작성되었습니다.
원본 링크 : https://www.daleseo.com/webpack-config/