Webpack

• Webpack은 module bundler
  • 우리가 파일을 서버로 넘기면 webpack이 그것들을 완전 호환이 가능한 static 파일로 바꿔준다. 
  • 우리는 모던한 JS와 CSS를 사용하는데, webpack이 이들을 노멀한 JS와 CSS로 바꿔준다. 
  • npm install webpack webpack-cli
    • webpack은 웹에서 작동하는데, webpack-cli를 함께 설치해야 콘솔에서도 webpack을 실행할 수 있다.
• 우선 서버가 작동되는 방식을 아래와 같이 바꾸자.
  • dev:server는 서버를 실행시킨다. 
  • dev:assets는 webpack을 이용해 client code(모던한 JS와 CSS)를 변환해 서버에 전달한다.
    • -w를 붙이면 파일을 수정했을 때 자동으로 웹을 업데이트 해준다.
  • 이 둘은 서로 다른 터미널에서 실행한다. 
    • npm run dev:server 
    • npm run der:assets

package.json

• webpack.config.js를 생성한다.
  • webpack이 실행되면 우선 이 파일을 찾는다. 
  • 이 파일은 server를 위한 코드와는 상관없다. 100% client code 용. 
  • 이 파일에서 client code를 번역해서 server에 넘겨준다고 생각하면됨.
  • 대신 babel-node를 쓸 수 없기 때문에 옛날 JS를 써야한다. 
• webpack은 두 가지를 가지고 있다. 
  • entry: 파일이 어디에서 왔는가를 의미, 변환하고자 하는 파일을 ENTRY_FILE에 담는다.
    • assets 폴더를 만들고 그 안에 js, scss 폴더를 만든다.
    • js 폴더 안에는 main.js 파일을 만들고, 
    • scss 폴더 안에는 styles.scss파일을 만든다.
  • output: 변환한 파일을 어디에 저장할지를 의미, 저장할 폴더를 OUTPUT_DIR로 설정.
    • static 폴더를 만든다.
  • __dirname은 현재 폴더를 의미
  • .js 등 우리가 사용할 모든 파일 형식들은 webpack에게 알려줘야 한다.

webpack.config.js

• 그리고 module을 발견할 때마다 다음과 같은 rule을 따른다.
  • .js 파일을 발견하면 babel-loader를 이용해 번역한다. 
    • npm install babel-lodaer @babel/polyfile
  • .scss 파일을 발견하면 ExtractCSS를 이용해 CSS파일의 텍스트를 추출한다. 
    • npm install extract-text-webpack-plugin@next 
    • css는 단점이 많아 sass를 사용한다. 
    • sass는 웹에 직접 적용할 수 없기 때문에 css로 변환해야 한다.
  • ExtractCSS는 다음과 같은 세 가지 플러그인을 이용해 CSS텍스트를 얻는다.
    • sass-loader는 sass파일(.scss)를 일반적인 css로 변환한다.
    • post-loader는 css를 받아서, 브라우저에 맞게 변환한다.
    • css-loader는 webpack이 css를 이해할 수 있게 돕는다.  
    • npm install node-sass sass-loader css-loader postcss-loader
    • postcss는 우리가 작성한 코드를 다양한 브라우저에 적용할 수 있게 바꿔준다. 
    • 이를 위해 autoprefixer라는 플러그인을 호출한다.
    • npm install autoprefixer

webpack.config.js

• 이렇게 하고 나서 아래와 같이 /aseets/scss/styles.scss를 만든다. 
• /views/layouts/main.pug에는 "/static/styles.scss"를 적용한다. 
• 다시 서버를 실행해보면 웹사이트의 배경색이 바뀌어 있다~ 쏘쿨!

/aseets/scss/styles.scss

/views/layouts/main.pug