[BuildSystem][ModuleBundler][Webpack]pug(jade)를 html로 바꾸기(2)

참고:

[BuildSystem][ModuleBundler][Webpack]Webpack과 모듈번들러, 기본 프로젝트 만들기, 일반 js합치기(1)

webpack은 모듈 번들러이다.

웹에 관해서는 정말 여러가지 기능이 있고 가장 자주 쓰는 기능은 바로 js를 합치는 기능이다.

그래서 전의 포스팅 js 합치는 예제에서는 아무 플러그인을 쓰지 않고도 js를 합치는게 가능했다.

하지만 우리는 js만 있는것도 아니고 html과 css도 남아있다.

그럼 이번에는 html을 분할해서 사용할 수 있는 pug를 보도록 하자.

https://pugjs.org

 pug는 솔직히 다 쓰는건 아니고 쓰는 사람만 쓴다.

그런데 필자 생각에는 아주 좋다고 생각한다.

html파일을 분리할 수 있다는 점, 또한 python같이 tag를 선언할 수 있다는 점도 큰 장점이다.

그럼 거두 절미하고 pug를 사용할 경우 html로 어떻게 번역하는지 보도록 하자.

프로젝트는 위의 구조와 같다.

//main.pug
doctype html
html
    head
        meta(charset='utf-8')
        title hello
    body
        header this is header
        div
            block content
        footer this is footer

//index.pug
extends main
block content
    span 안녕하세요!

위의 구조일 때 index.pug는 main.pug를 상속받아서 만든다.

즉 index.pug를 만드려면 main.pug가 반드시 필요한 걸 알 수 있다.

//package.json
"devDependencies": {
  "html-webpack-plugin": "^3.2.0",
  "pug-loader": "^2.4.0",
  "webpack": "^4.35.3",
  "webpack-cli": "^3.3.6"
}

번역하기 위해서는 총 4개의 패키지가 dev용으로 필요하다.

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: ['./src/index.pug'],
    },
    output: {
        filename: 'index.html',
        path: path.join(__dirname,'./dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.pug'
        }),
    ],
    module: {
        rules: [
            {
                test: /\.pug$/,
                use: ['pug-loader']
            },
        ]
    }
};

그럼 웹팩설정을 보도록 하자.

entry와 output은 알테니 나머지를 보자.

plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.pug'
    }),
],

플러그인은 webpack에서 기본으로 지원하지 않는기능들을 추가해서 사용할 수 있다.

HtmlWebpakcPlugin은 Html으로 output하게 해준다.

지금은 entry에 html을 적지만 이건 html밖에 없을때의 이야기가 나중에는 이를 사용하지 않게 된다.

module: {
    rules: [
        {
            test: /\.pug$/,
            use: ['pug-loader']
        },
    ]
}

그리고 pug파일을 만나면 pug-loader를 이용해서 컴파일 해라는 룰이다.

webpack

이제 빌드를 해보자.

이렇게 빌드가 완료되는 과정을 확인할 수 있다.

결과 파일을 확인해보자.

제대로 번역되는걸 확인할 수 있다.