webpack에 퍼그(pug) 설정하기 (pug 번들링)

webpack이란?

웹팩(Webpack)은 모던 웹 개발에서 매우 중요한 도구 중 하나입니다. React나 Vue 등 요즘 대세인 javascript 프레임워크로 개발을 할때도 사용합니다.

 

간단하게 설명하면 javascript 기반의 프로젝트 번들링하기 위해 사용합니다. 번들링이라고 하면, 여러개의 나눠진 파일들을 하나의 파일로 묶어주는 역할을 합니다. (물론 html, scss 등 javascript가 아닌 파일들도 번들링이 가능합니다)

 

pug란?

html 코드를 좀 더 간략하게 작성할 수 있도록 도와줍니다. 파이썬과 같이 indent를 사용하여 depth를 구분하기 때문에 꺽새를 사용하는 html 코드에 비해 더 간략합니다.

 

코드로 예를들면,

<a href="//google.com">Google</a>

 

위 html 을 pug로 작성하면, 아래와 같이 작성할 수 있습니다.

a(href='//google.com') Google

 

그리고 pug는 여러개의 파일로 나눠서 include(import)를 할 수 있기 때문에 영역별로 파일을 나눠서 관리하거나 코드를 재활용할 수 있습니다. 예를들면, 아래와 같이 head 안에 meta 태그들만 따로 분리해서 관리할 수 있습니다.

html(lang='ko')
  head
    include head/meta
    title test
  body
    .tap
      button tap1
      button tap2
      button tap3
      button tap4
    .tap-body
      h3 title
      p description

 

 

자세한 문법은 아래 사이트를 참고해주세요.

Attributes – Pug

 

webpack에 pug 설정하기

사실 pug를 html 파일로 빌드하려면 pug-cli를 활용할 수 있지만, pug 뿐만 아니라 scss, typescript 등 다른 파일들과 같이 사용할때는 webpack으로 한번에 처리하는게 개발 및 운영하는 관점에서 편리합니다. 따라서, 본 글에서는 pug-cli가 아닌 webpack으로 빌드및 번들링하는 방법에 대해 소개합니다.

 

프로젝트 설정

간단하게 pug와 webpack으로 프로젝트를 생성하도록 하겠습니다.

우선 pug-test 디렉토리를 생성합니다. 이후 yarn을 이용하여 package.json을 생성합니다.

mkdir pug-test
cd pug-test
yarn init -y

 

디렉토리 구조는 아래와 같은 형태로 가져가도록 하겠습니다.

• src/view: pug 파일들이 위치하는 곳
• src/style: css, scss 등 스타일 파일들이 위치하는 곳

mkdir -p src/view
mkdir src/style

디렉토리 구조

 

pug, webpack 의존성 추가

pug와 webpack 의존성 설치가 필요합니다.

• pug-loader: webpack에서 pug 파일들을 다루기 위해서 설치
• html-webpack-plugin: pug 파일들을 html 파일로 번들링하기 위해 설치

yarn add pug
yarn add webpack pug-loader html-webpack-plugin
yarn add --dev webpack-cli

 

pug 파일 생성

간단하게 제목과 설명을 보여주는 pug 파일을 생성하겠습니다. src/view/index.pug 파일을 생성합니다.

doctype html
html(lang='ko')
    head
        meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
        meta(charset='utf-8')
        title pug & webpack test
    body
        h3 pug & html 테스트
        p Lorem Ipsum is simply dummy text of the printing and typesetting industry.

 

webpack 설정

의존성 추가가 되었으니 webpack 설정을 합니다. 프로젝트 root에 webpack.config.js를 생성합니다. 오직 pug만 설정하고, sass나 javascript(또는 typescript) 설정을 생략하였습니다.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 프로젝트 root 경로
const projectRootPath = './';

// 환경변수에 따른 develop 또는 production 구분
const PROD = 'production';
const DEV = 'development';
const mode = process.env?.NODE_ENV?.toLowerCase() === 'prod' ? PROD : DEV;
const isDevMode = mode === DEV;

// 빌드 산출물 경로
const buildPath = path.resolve(projectRootPath, 'dist');

// webpack 플러그인들
const plugins = [
  new HtmlWebpackPlugin({
    template: path.resolve(projectRootPath, 'src/view/index.pug'),
    filename: 'index.html',
    inject: false,
    minify: { removeComments: !isDevMode },
  }),
];

module.exports = {
  ...(isDevMode && { devtool: 'source-map' }),
  mode,
  plugins,
  entry: ['src/view/index.pug'].map((p) => path.resolve(projectRootPath, p)),
  output: {
    path: buildPath
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: ['pug-loader'],
      },
    ],
  }
};

 

 

빌드 및 번들링

이제 빌드를 해봅시다. package.json에 아래와 같이 scripts를 추가합니다.

"scripts": {
    "build": "rm -rf ./build && yarn webpack --config webpack.config.js",
    "build:prod": "NODE_ENV=prod && yarn build"
},

 

그리고, yarn build 명령어로 빌드를 수행합니다.

yarn build

 

webpack.config.js에 빌드 위치를 dist/*로 하였기 때문에 프로젝트 루트에 아래와 같이 index.html 파일이 생성됩니다. (javascript 파일은 설정 안했으므로, main.js는 무시해주세요)

pug 빌드 및 번들링 완료

 

브라우저로 실행해봅시다. 아래와 같이 잘 나오네요

이제 사용하실 css 전처리기(sass, less 등)나 javascript webpack 설정을 하면 될거 같습니다