webpack-dev-middleware 시작하기

이전에 webpack-dev-server를 처음 적용했을때 참 편하다 생각했다. 근데 뭔가 index.html 말고 테스트 모듈도 실행해서 실제 실행 결과로 테스트 해보고 싶은 생각이 들었다. 구체적으로 예를 들자면 tinymce opengraph 플러그인에서 opengraph 샘플 데이터 말고 실제 opengraph 데이터를 가져오는 것을 보고 싶었다.

// 지금
opengraph: {
  fetch_handler: (url, callback) => {
    setTimeout(() => {
      if (url === "http://a.com") {
        callback({
          description: "안녕하세요, TISTORY입니다. 지난 2월 2일부터 시범운영한 로그인 보안 기능을 정식 오픈합니다. 현재까지 3천 여개의 계정에서 사용 중이며 등록된 기기는 7천 여개에 달합니다. 많은 분들의 사용으로 안정성을 확인하였으므로 이제 모든 계정에 로그인 보안 기능을 활성화하려고 합니다 로그인 보안 바로가기 Q&A 정식 오픈으로 무엇이 달라지나요? 모든 계정에 로그인 보안이 기본적으로 활성화됩니다. 시범운영 기간 동안에..",
          host: "notice.tistory.com",
          mediaUrl: "",
          image: "https://t1.daumcdn.net/cfile/tistory/197F333A4F0A730C03",
          title: "당신의 블로그는 안전한가요? - 로그인 보안 기능 정식 오픈 로그인 보안 기능 정식 오픈",
          type: "article",
          url: "http://notice.tistory.com/2384"
        })
      } else {
        callback({
          description: "자유를 위해, 가족을 위해, 이 땅을 위해! '혹성탈출: 종의 전쟁(War for the Planet of the Apes)' 1차 예고편 --------- 영화 소개 --------- ▶장르(Genre) : 액션(Action), 모험(Adventure), 드라마(Drama) ▶...",
          host : "www.youtube.com",
          image : "https://i.ytimg.com/vi/W28VlDoJwGo/hqdefault.jpg",
          mediaUrl : "https://www.youtube.com/embed/W28VlDoJwGo",
          title : "[혹성탈출: 종의 전쟁] 1차 예고편 War for the Planet of the Apes 앤디 서키스,우디 해럴슨, 주디 그리어, 맷 리브스 감독 (한국어 CC)",
          type : "video",
          url : "https://www.youtube.com/watch?v=W28VlDoJwGo"
        })
      }
    }, 1000)
  }
}

// 원하는 것
opengraph: {
  fetch_handler: (url, callback) => {
    fetch(`/opengraph?url=${url}`)
      .then(res => res.json())
      .then(json => callback(json))
  }
}

어떻게 해야할까 보다보니 webpack-dev-server로 이런 일을 할 수 있다. 어차피 node 서비스이니 api만 있다면 안될리는 없다고 생각하긴했다. 근데 설정방법이 맘에 안든다. webpack.config 안에 devServer를 추가하고 여기에 서버 로직을 넣어야 한다. 뭐 import를 하면 코드가 복잡해지는 건 해결되긴 하는데 맘에 안든다. 저걸 하느니 그냥 node 서버를 만드는게 낫겠다 싶었다.

webpack-dev-middleware는 바로 이런 일을 해주는 middleware다. express에 webpack.config과 함께 설정해주기만 하면 바로 사용가능하다.

const webpack = require('webpack')
const middleware = require('webpack-dev-middleware')
const webpackConfig = require('./webpack.config')
const express = require('express')
const app = express()

app.use(middleware(webpack(webpackConfig), {
  publicPath: webpackConfig.output.publicPath
}))

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/static/index.html')
})

app.listen(3000, () => console.log('tinymce-plugin-opengraph dev app listening on port 3000.'))

이제 fetch 하는 것만 넣으면 끝.