12.23공부

client에 있는 파일은 우리가 작성하는 폴더 (webpack처리 전 ) 서버가아닌 브라우저에서 실행될 자바스크립트

assets는 변환 된 폴더

 

주소 loacalhost:4000/assets/js/main.js에 접근 할 수없다.

server.js에서 정적파일을 설정 했는데

기본적으로 파일이 공개되지 않음

여기서 express에게 사람들에게 볼 수있게 해달라고 요청함

-> app.use("/static", express.static("assets"));

               이쪽부분은 브라우저에게 알려주는 부분이라 이름이달라도 돼 예) /static

 

base.pug랑 assets/js/main.js파일을 연결 시킬 것임

basepug에 

script(src="/static/js/main.js")//브라우저를 위한 코드이지 node.js를 위한 코드아님 

 

client/js/main.js에 최신코드를 짜면 babel-loader로

assets/js/main.js에 변환이되고

서버를 static/js/mainjs로 등록했고

base.pug에 script로 불러와서

해당 페이지를 열때 실행된다.

 

wbpack과 javascript 연동되게 했고

못생긴 javascript를 pug파일로 불러옴

 

---

client > scss 폴더 > style.scss ,_variables.scss 파일만들기 '

sass-loader설치 :sass/scss File -> Css로 컴파일

npm i sass-loader sass webpack --save-dev

 

css loader설치 :@import , url()을 풀어서 해석해줌

npm i --save-dev css-loader

 

style loader설치 : css를 DOM에 주입 (브라우저에 실행)

npm i --save-dev style-loader

 

npm i sass sass-loader css-loader style-loader -D

{
            test: /\.scss$/,   //scss파일을
            use:["style-loader","css-loader","sass-loader"]  //sass-loader, css-loader,style-loader적용
        }

webpack은 뒤에서 부터 읽는다. 따라서 역순으로 작성 

sass-loader:  scss ->css로 변환하고

css-loader : import,export등을 해석

style-loader : style을 Dom에 적용

 

main.js  

import"../scss/style.scss";  --> scssloader적용되어 변환되고 html head 안에 적용된다.

console.log("hi");