이번에도 블로그 제작 중 md를 읽기 위한 vue-markdown-loader 설치와 함께 webpack.config.js 생성 및 수정이 필요했고, 그 과정을 기록하려 한다.
웹팩을 사용할 때에 반드시 설정파일이 필요하진 않다.
하지만 대부분 설정 파일을 사용한다.
webpack.config.js
로 파일 생성하면 초기세팅 완료$ nkdir webpack-config
$ cd webpack-config
$ npm init -y
$ npm i -D webpack webpack-cli
$ touch webpack.config.js
module.exports = {};
default 파일이름 대신 다른 이름을 사용할 경우 아래 처럼 --config 옵션을 추가하면 된다.
$ npx webpack --config [file_name]
웹팩은 기본적으로 여러 개의 자바스크립트 모듈을 하나의 파일로 묶어낸 번들러이다.
따라서 웹팩은 다른 모듈을 사용하고 있는 최상위 자바스크립트 파일이 어디 위치해있는 지 알아야 한다.
그러므로 설정 파일에서 이를 entry
속성으로 명시해준다.
웹팩은 이 entry
속성에 명시된 파일을 기준으로 의존성 트리를 만들어 하나의 번들 파일을 만들어 내게 된다. entry
설정의 기본값은 ./src/index.js
이다.
module.exports = {
entry: "./src/script.js",
};
script.js
파일에 아래와 같이 간단한 문자열을 표시하는 js 코드를 작성
const message = document.createTextNode("웹팩 안녕");
document.body.appendChild(message);
그 후 터미널에서 npx webpack
커맨드를 실행하면 웹팩이 script.js
파일을 읽어들여 dist
폴더에 main.js
파일로 묶어낸다.
실제로 dist/main.js
를 확인해 보면
웹팩이 Uglify/Minify
어글리파이/미니파이 ? 를 통해 한줄의 코드로 바꿔놓았음을 확인할 수 있다.
위처럼 웹팩이 번들링 결과를 dist/main.js
파일로 묶어내는 이유는
설정이 dist/main.js
로 돼있기 때문이다.
webpack.config.js
의 속성인 output
을 이용하여 이 값을 다른 디렉토리와 파일로 변경이 가능하다.
entry
속성은 항상 프로젝트 디렉토리 안이기 때문에 상대경로지만,
output
은 항상 디렉토리 안이라는 보장이 없기 때문에 절대경로인 점에 주의해야한다.
module.exports = {
entry: "./src/script.js",
output: {
path: __dirname,
filename: "build.js",
},
};
여기서 __dirname
은 nodeJS
에서 현재 프로젝트 디렉토리를 의미한다.
이제 웹팩을 실행하면 프로젝트 최상위 디렉토리에 build.js
파일이 생성된다.
dist/script.js
의 경로를 build.js
로 재정의하는 느낌인 것 같다.
사용하는 이유는 웹팩이라는 점을 고려하면 코드를 줄여 최적화시키려는 것인가..?
웹팩은 JS 뿐 아니라 loader
를 이용하여 CSS, 이미지, 웹폰트, JSX, VUE 등 그 외 다양한 종류의 파일을 번들링할 수 있다.
웹팩에서의 가장 강력한 기능이라고 한다.
자주 사용되는 CSS 파일에 대해 설정해보자.
$ npm i --D style-loader css-loader
그 후 적용할 style.css 파일을 생성한다.
그리고 script.js
파일에서 style.css
파일을 임포트 한다.
주의사항 style.css
앞에 반드시 ./
를 붙혀 주어야 한다.
그렇지 않으면 최상위 디렉토리가 아닌 node_modules
디렉토리를 찾는다.
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
를 차례로 나열했다.
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/