웹팩(Webpack) 기본 설정법 (Entry/Output/Loader/Plugins)

수민·2023년 1월 18일
0

code1

목록 보기
4/4

설정파일

설정 파일
웹팩을 사용할 때 반드시 설정 파일이 필요하지는 않지만, 대부분의 경우에는 설정 파일을 사용합니다. 왜냐하면 터미널에서 웹팩 커맨드를 실행할 때 마다 모든 옵션들을 붙여주는게 번거롭고, 설정 파일을 소스 저장소에 올려두면 다른 개발자들은 크게 설정이 신경쓰지 않고 협업을 할 수 있기 때문입니다.

먼저 디렉터리를 만들고 NPN 프로젝트를 초기화 후, 웹팩과 웹팩 CLI 패키지를 설치합니다. 그런 다음, 웹팩에서 디폴트로 인지하는 설정 파일 이름인 webpack.config.js로 빈 설정 파일을 하나 만들면 초기 세팅 완료입니다.


$ mkdir webpack-config
$ cd webpack-config
$ npm init -y
$ npm i -D webpack webpack-cli
$ touch webpack.config.js
  • webpack.config.js
module.exports = {};

참고로 설정 파일의 이름을 디폴트가 아닌 다른 이름을 사용하고 싶은 경우에는 웹팩 커맨드 실행 시 다음과 같이 --config 옵션을 주시면 됩니다.


 npx webpack --config [설정 파일 이름]

Entry 설정

웹팩은 기본적으로 여러 개의 자바스크립트 모듈을 하나의 파일로 묶어내는 번들러입니다. 따라서 웹팩은 다른 모듈을 사용하고 있는 최상위 자바스크립트 파일이 어디에 있는지 알아야 하며, 설정 파일에서 이를 Entry 속성으로 명시합니다. 웹팩은 이 Entry 속성에 명시된 파일을 기준으로 의존성 트리를 만들어 하나의 번들 파일을 만들어 내게 됩니다. Entry 설정의 기본값은 ./src/index.js이고, 예제 프로젝트에서는 이를 간단하게 ./script.js로 변경해보도록 하겠습니다.

  • webpack config.js

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

그리고 script.js 파일에 다음과 같이 브라우져 화면에 간단한 문자열을 표시하는 자바스크립트 코드를 작성합니다.

script.js

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

그 다음, 터미널에서 npx webpack 커맨드를 실행하면 웹팩이 script.js 파일을 읽어들여 dist 디렉터리에 main.js 파일로 묶어냅니다.

dist/main.js 파일을 열어보면 웹팩이 Uglify/Minify통해 읽기 어려운 한 줄의 코드로 바꿔놓았음을 확인할 수 있습니다.

Output 설정

위 섹션에서 웹팩이 번들링 결과를 dist/main.js 파일로 묶어내는 이유는 설정이 dist/main.js이기 때문입니다. 설정 파일의 Output 속성을 통해서 이 값을 다른 디렉터리와 파일로 변경할 수 있습니다. 예제 프로젝트에서는 dist/main.js 대신에 더 간단히 output.js 파일로 묶어내도록 Output 설정을 변경해보겠습니다. Entry 설정은 항상 프로젝트 디렉터리 내부이기 때문에 상대 경로로 하는 반면에, Output 설정은 항상 프로젝트 디렉터리 내부라는 보장이 없으므로 절대 경로로 한는 점에 주의 바랍니다.

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

참고로 __dirname NodeJS에서 현재 프로젝트 디렉터리를 의미합니다. 이제 웹팩을 실행하면 프로젝트 최상위 디렉터리에 build.js 파일이 생성되었음을 확인할 수 있습니다.

다음과 같이 build.js를 참조하는 index.html 파일을 작성 후 브라우져에서 열어보면 화면에 Webpack Example이 출력될 것입니다.

  • index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Webpack Example</title>
  </head>
  <body>
    <script src="./build.js"></script>
  </body>
</html>

Loader 설정

웹팩은 자바스크립트 뿐만 아니라, Loader를 이용하여 CSS나 이미지, 웹폰트, JSX, VUE 등 다양한 종류의 파일을 함께 번들링할 수 있습니다. (개인적으로 웹팩의 가장 강력한 기능이라고 생각합니다.) 본 예제에서는 가장 자주 사용되는 CSS 파일에 대해서만 설정을 해보겠습니다.

먼저, 웹팩이 CSS 파일을 처리할 수 있게 만들어주는 style-loader와 css-loader 패키지를 설치합니다.


 npm i --D style-loader css-loader

그리고 브라우져 글씨를 모두 빨간색으로 만드는 간단한 CSS 파일을 작성합니다.

  • style.css
body{
color:red;
}

그런 다음, script.js 파일에서 마치 JS 파일을 임포트하듯이 CSS 파일을 임포트 합니다. 여기서 주의 사항은 반드시 style.css 앞에 ./를 붙여줘야 한다는 점입니다. 그렇지 않으면 프로젝트 최상위 디렉터리가 아닌 node_modules 디렉터리를 뒤지기 때문입니다.

profile
헬창목표

0개의 댓글