WebPack 기본 설정 방법

Webpack 기본 설정방법

Etry/Output/Loader/Plugins

React, Vue, Angular와 같은 자바스크립트 프레임워크를 기반으로 프로젝트를 하다보면 webpack.config.js라는 파일과 자주 마주치게 됩니다. 바로 Webpack 설정 파일인데요. 이번 포스트에서는 이 설정 파일을 기본으로 한 Webpack 기본 설정 방법에 대해 알아보겠습니다.

설정 파일

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

먼저 디렉토리를 만들고 NPM 프로젝트를 초기화 후, Webpack과 Webpack CLI패키지를 설치합니다. 그런 다음, Webpack에서 디폴트로 인지하는 설정 파일 이름인 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 = {}

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

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

Entry 설정

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

webpack.config.js

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

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

script.js

const message = document.createTextNode("웹패ㄱ 예제")
document.body.appendChild(message)

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

npx webpack
asset main.js 91 bytes [emitted] [minimized] (name: main)
./script.js 95 bytes [built] [code generated]

webpack 5.33.2 compiled with 1 warning in 173 ms

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

dist/main.js

(()=>{const e=document.createTextNode("웹패ㄱ 예제");document.body.appendChild(e)})();

Output 설정

위 섹션에서 Webpack이 번들링 결과를 dist/main.js 파일로 묶어내는 이유는 ouput 기본 설정이 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에서 현재 프로젝트 디렉토리를 의미 합니다. 이제 Webpack을 실행하면 프로젝트 최상위 디렉토리에 build.js 파일이 생성되었음을 확인할 수 있습니다.

➜  webpack-config git:(master) npx webpack
asset build.js 91 bytes [emitted] [minimized] (name: main)
./script.js 95 bytes [built] [code generated]

webpack 5.33.2 compiled with 1 warning in 166 ms

다음과 같이 build.js를 참조하는 index.html파일을 작성 후 브라우저에서 열어보면 화면에 웹패ㄱ 예제가 출력되는 것을 확인 할 수 있습니다.

index.html

<!DOCTYPE html>
<html lang="kr">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Example</title>
</head>
<body>
  <script src="./build.js"></script>
</body>
</html>

Loader 설정

Webpack은 자바스크립트 뿐만 아니라, Loader 를 이용하여 CSS나, 웹폰트, JSX, VUE 등 다양한 종류의 파일을 함께 번들링 할 수 있습니다. 본 예제에서는 가장 자주 사용되는 CSS 파일에 대해서만 설정을 해보겠습니다.

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

npm i -D style-loader css-loader

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

style.css

body {
	color: blue
}

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

script.js

import "./style.css"

const message = document.createTextNode("웹패ㄱ 예제")
document.body.appendChild(message);

마지막으로 CSS 파일이 방금 설치한 두개의 모듈에 의해서 처리될 수 있도록 Webpack 설정을 해줘야 합니다. 설정 파일을 열어 module 속성을 추가하고, 그 안에 rules 속성을 통해 처리 규칙을 등록합니다. test 항목에 정의 된 정규식에 매칭되는 파일은 use 항목에 등록된 로더를 통해서 처리되게 됩니다. 본 예제에서는 CSS 파일 처리를 위해서 test 항목에 정규식으로 확장자가 css 인 파일만 인식 하도록 설정하고, use 항목에 style-loader 와 css-loader 를 차례로 입력하였습니다.

webpack.config.js

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

마지막으로 다시 Webpack을 실행 후 다시 index.html 파일을 브라우저에서 열어보면 웹패ㄱ 예제이 파란색 글씨로 표시될 것입니다.

➜  webpack-config git:(master) ✗ npx webpack
asset build.js 3.65 KiB [emitted] [minimized] (name: main)
runtime modules 663 bytes 3 modules
orphan modules 324 bytes [orphan] 1 module
cacheable modules 8.98 KiB
  modules by path ./node_modules/ 8.23 KiB
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
  ./script.js + 1 modules 441 bytes [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js!./style.css 321 bytes [built] [code generated]

webpack 5.33.2 compiled with 1 warning in 548 ms

다른 종류의 파일들로 그에 상응하는 로더 패키지를 제공하고 있으며, 비슷한 형식으로 설정 파일에 셋팅해줄 수 있습니다.

Plugin 설정

마지막으로 Plugin 설정 방법에 대해서 알아보겠습니다. Plugin을 통해서 Loader로 설정이 애매한 부분들을 커버할 수 있습니다. 예를 들어, Webpack을 실행할 때 마다 기존에 있던 번들 파일을 먼저 깔끔히 지우고 싶은 경우에는 clean-webpack-plugin 플러그인을 사용할 수 있습니다.

먼저 NPM으로 clean-webpack-plugin 플러그인을 설치합니다.

npm i -D clean-webpack-plugin

그리고 설정 파일에 설치한 plugin을 import한 후에, plugins 속성에 import한 plugin을 추가합니다.

webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
  entry: "./script.js",
  output: {
    publicPath: '/dist/',
    path: path.resolve(__dirname, 'dist'),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new CleanWebpackPlugin({
    cleanAfterEveryBuildPatterns: ['dist']
})],
}

CleanWebpackPlugin default export가 아니기 때문에 위와 같이 변수를 설정한다. 또한 build 폴더내의 모든 파일을 삭제 하므로.. 조심하자.. Webpack실행 하면서 모든 파일을 삭제 해버렸다. 그래서 다시 dist 폴더에 build파일을 넣는 형태로 바꿨다.

좀더 자세한 샘플을 보고싶으면 여기

https://m.blog.naver.com/thdbsgh3443/221638302452

WebPack 기본 설정 방법