<webpack> views

이번 시간에는 webpack을 통해 변환한 파일을 탬플릿 파일에 연결하며 주의할 사항에 대해 얘기하겠습니다.

main.pug

doctype html
html
  head
    link(rel="stylesheet", href="/static/styles.css")
  body
    script(src="/static/main.js")

app.js

video src 연결할때처럼 서버입장에서는 static 폴더에 대한 접근에 대해 실행할 함수를 알지 못하기 때문에 app.js에서 static 폴더 접근에 대한 코드를 작성해주겠습니다.

app.use('/static', express.static('static'));

package.json

이제 FrontEnd작업을 하실텐데 하면서 scss파일을 수정하고 저장할때마다 nodemon이 변화를 감지하고 서버를 재실행시킵니다. 이것을 막기 위해 아래와 같이 --ignore 'scss'를 추가해주시면 됩니다.

{
  "scripts":{
    "dev:server": "nodemon --exec babel-node init.js --ignore 'scss'",
  }
}