webpack(js, scss)

---

webPack
JS를 pug파일에서, client쪽에서 사용할 수
있게 compile해 주는 library.
여기서는
sass와 Js를 client에서, pug파일에서
사용할 수 있게 webPack을 해 준다.
sass는 css로 변환하고 css를 client에서
사용할 수 있게 webpack을 한다.
!!!참고로 react나 next.js를 설치하면, 자동적으로 webpack이
깔려있음.

---

공식문서

https://webpack.js.org/
https://webpack.js.org/loaders/css-loader/
https://webpack.js.org/loaders/style-loader/

  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/node": "^7.19.1",
    "@babel/preset-env": "^7.19.4",
    "babel-loader": "^9.0.1",
    "css-loader": "^6.7.1",
    "mini-css-extract-plugin": "^2.6.1",
    "nodemon": "^2.0.20",
    "sass": "^1.55.0",
    "sass-loader": "^13.1.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }

그 외 npm i -D 모드로 npm 해 줘야 하는 것들.

1. webpack.config.js

src폴더가 아니고 root폴더에 위치해야 함.

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
///scss를 css로 css가 front에 적용될 수 있게 compile해주는것.
const path = require('path')
///경로 사용을 위해 path를 불러준다.

module.exports = {
 entry: {
   main: './src/client/js/main.js',
   videoPlayer: './src/client/js/videoPlayer.js',
 },
 ///js파일을 pug(front)에 적용시키기 위한 js파일들이
 ///위치할 곳, 
 
 plugins: [
   new MiniCssExtractPlugin({
     filename: 'css/styles.css',
   }),
 ],
 ///css파일이 front에 적용될 수 있게 compile해주는 작업
 ///filename은 assets폴더의 css의 styles.css임.
 
 mode: 'development',
 ///mode를 반드시 development로 설정해 줄것
 
 watch: true, 
  ///front의 nodemon임. restart할 필요 없음.
  ///이 설정이 없으면 scss파일 추가할 떄마다, 
  ///npm run dev:assets를 실행시켜야 함.
  
 output: {
   filename: 'js/[name].js',
   path: path.resolve(__dirname, 'assets'),
   clean: true,
 },
 ///js파일 작성 후, js파일에 compile되는 위치 지정.
 ///filename을 위와 같이 지정하면, 
 ///위에서 entry에서 만든 파일(main.js, videoPlayer.js)들이
 ///아래의 사진에 보든이 root위치에 compile되어서, 생성됨.
 ///아래 사진 참고.
 ///path.resolve(__dirname, assets)는 현재 위치에서의
 ///assets폴더를 의미함.
 ///console로 __dirname찍어보면, jmtube로 찍힘.
 
 module: {
   rules: [
     {
       test: /\.js$/,
       use: {
         loader: 'babel-loader',
         options: {
           presets: [['@babel/preset-env']],
         },
       },
     },
     {
       test: /\.scss$/,
       use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
     },
   ],
 },
}
///여기서 module은 두개가 loader되어 있음.
///1. js를 compile하는 babel-loader
///2. scss를 compile하는 3개!!
///js와 scss 적용을 위해서는 위와같이 module를 설정해 주어야 함.

2. client

위와 같이 client폴더, 아래 js, sass폴더를 만들고
scss폴더안에 _variables.scss, styles.scss 폴더를 만든다.

2-1. src/client/js/main.js

import '../scss/styles.scss'

alert('hi')

scss폴더의 styles.scss 파일을 import한다.

2-2. src/client/scss/_variables.scss

$red: red;
$green: green;

2-3. src/client/scss/styles.scss

styles 파일은 _variables.scss 파일을 import 한다.

@import './_variables';

body {
  background-color: $red;
  color: $green
}

3. src/server.js

app.use(localsMiddleware)
app.use('/uploads', express.static('uploads')) //'/uploads' path로 uploads폴더에 접근허락해조
app.use('/static', express.static('assets')) //'/assets' path로 assets폴더에 접근허락해줌
///위와 같이 static을 사용해 /static path로 접근하면,
///assets폴더에 접근가능해지게 설정한다.

app.use('/', rootRouter)
app.use('/videos', videoRouter)
app.use('/users', userRouter)

4. package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js",
    "dev:assets": "webpack --config webpack.config.js",
    "dev:server": "nodemon"
  },

1.npm run dev:assets 를 치면, webpack이 실행되게 스크립트를 만들어놓는다.
2. webpack은 client부분이기 때문에, 개발시,
반드시, npm run dev:assets, npm run dev:server
두개를 실행시켜 놓아야함. assets는 server돌리는 부분
3. server돌리는 부분이 dev:server로 바뀐이유는, nodemon이
front부분이 바뀔때는 신경쓰지 않게 하기 위해서임.
아래 파일로 나머지 스크립트 대체된다.

5.nodemon.json(root 위치임)

{
  "ignore": ["webpack.config.js", "src/client/*", "assets/*"],
  "exec": "babel-node src/server.js"
}

1. exec는 실행 스크립트,
2. igonre는 front부분에서 변화 생겨도 server재실행 안시킴.

6. gitigonre

/uploads
/assets

부분은 gitignore부분에 추가시킨다.

7. base.pug

위와 같은 설정으로 front에서 JS및 Scss를 사용할 수 있음.
사용부분 참고!!

doctype html 
html(lang="ko")
    head 
        //block head
        title #{pageTitle} | JmTube
        link(rel="stylesheet" href="https://unpkg.com/mvp.css@1.12/mvp.css")
        ///맨처음 설정했던 mvp는 없애준다.아래styles.css를
        ///적용할 예정이라.
        
        link(rel="stylesheet" href="/static/css/styles.css")
        ///static/css path로 styles.css를 불러들임..
        ///scss가 css로 ompile되서 담기는 파일임.
    body 
        header 
            h1=pageTitle
            nav 
                ul 
                    li 
                        a(href='/') Home
                    li    
                        a(href='/search') Search
                    if loggedIn 
                        li    
                            a(href='/users/edit') Edit Profile
                        li    
                            a(href='/users/logout') Logout
                        li    
                            a(href=`/users/${loggedInUser._id}`) #{loggedInUser.email}의 Profile
                        li 
                            a(href='/videos/upload') Upload Video
                
                    else
                        li    
                            a(href='/join') Join
                        li    
                            a(href='/login') Login
        main
            block content
    include partials/footer.pug
    script(src='/static/js/main.js')
    ///Js 문법 사용시 static.js path를 통해서,
    ///compile된 main.js 파일을 사용하게 됨.
    /// '/static'path는 server.js에서 만들었음.
    /// '/static path로 접근하면, assets폴더를 열어주게끔~