Youtube Clone Coding (8. webpack)

Webpack은 node.js에서 babel과 같은 역할을 한다.

1. webpack, webpack-cli devDependencies 로 설치

   • npm i webpack webpack-cli -D

2. src에 client/js/main.js파일 만들기.

   • 나중에 main.js에 쓴 코드들이 우리가 처리하고자 하는 코드들임.

3. webpack.config.js파일 만들기

   • webpack.confing.js 내용

     • webpack.config.js에 들어가는 코드들은 옛날 문법으로 써줘야함.

     • entry: 우리가 처리하고자 하는 파일의 경로

     • mode: 개발단계이면 development 완성단계이면 production

     • output: 결과물

     • filename: 이 프로퍼티에 우리 결과물이 될 파일 이름 입력

     • path: 이 프로퍼티에 우리 결과물 파일을 어디에 저장할 지 지정 (이 경로는 절대경로(전체경로)여야함!)

     • rules: 우리가 각각의 파일 종류에 따라 어떤 전환을 할 건지 결정하는 것
       - 여러개의 rules가 있을 수 있으니 배열로 만들어 준다.
       - test: 어떤 파일을 변환시킬 건지 (이 강이에서는 모든 js파일을 변환시킨다는 코드임)
       - use: 어떤 loader을 통해서 변환 시킬 건지 (이강의에서는 babel-loader을 사용)
       - babel-loader을 사용하기 위해서 npm i babel-loader을 해 주어야함.
       - 정리: babel-loader을 이용해서 js파일들을 변경한다는 것임.

       const path = require("path");
       
       module.exports = {
         entry: "./src/client/js/main.js",
         mode: "development",
         output: {
           filename: "main.js",
           path: path.resolve(__dirname, "assets", "js"),
         },
         module: {
           rules: [
             {
               test: /\.js$/,
               use: {
                 loader: "babel-loader",
                 options: {
                   presets: [["@babel/preset-env", { targets: "defaults" }]],
                 },
               },
             },
           ],
         },
       };

4. 브라우저에서 assets파일을 읽을 수 있게 처리해주기

   • 서버는 모든 파일을 브라우저에게 공개 하지 않기때문에 따로 설정을 해 주어야한다.
   • app.use("/static", express.static("assets"));
     • 유저가 /static으로 갈때 assets파일을 보여 준다는 뜻

5. pug에 script써주기

   • script(src="/static/js/main.js")

6. webpack.config.js 실행시키기

   • package.json파일에 코드적어주기

     • 밑의 코드로 인해 npm run assets하면 webpack을 실행 시킬 수 있다.

     • 실행시키면 assets/js/main.js파일이 만들어짐 → 우리가 쓴 코드들을 변환시킨 코드가 들어가짐

       "assets": "webpack --config webpack.config.js"

7. scss를 css로 변환 시키기

   • npm i sass sass-loader css-loader style-loader
   • client/scss/styles.scss만들기 → css로 만들 파일
   • main.js에 styles.scss import하기
   • rules에 scss관련 loader설정하기

     • loader은 적힌 반대 순서대로 실행됨.

       {
             test: /\.scss$/,
             use: ["style-loader", "css-loader", "sass-loader"],
       },

   • npm run assets 실행 시키기

8. MiniCssExtractPlugin을 사용해서 js와 css파일 분리하기

   • npm install --save-dev mini-css-extract-plugin
   • 밑의 코드로인해 js와 css파일이 서로 분리된다.
     • main.js는 assets/js/main.js에 저장됨
     • sass는 assets/css/styles.css에 저장됨

   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   const path = require("path");
   module.exports = {
     entry: "./src/client/js/main.js",
     mode: "development",
     plugins: [
       new MiniCssExtractPlugin({
         filename: "css/styles.css",
       }),
     ],
     output: {
       filename: "js/main.js",
       path: path.resolve(__dirname, "assets"),
     },
     module: {
       rules: [
         {
           test: /\.js$/,
           use: {
             loader: "babel-loader",
             options: {
               presets: [["@babel/preset-env", { targets: "defaults" }]],
             },
           },
         },
         {
           test: /\.scss$/,
           use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
         },
       ],
     },
   };

   • pug에 css연결하기
     • link(rel="stylesheet", href="/static/css/styles.css")

9. webpack을 돌릴려면 계속 npm run assets해야하는 수고를 더는법

   • webpack.config,js에 다음과 같은 설정을 해준다.

     • watch: true → 초기 빌드 후 webpack은 해결된 파일의 변경 사항을 계속 감시한다.

     • clean: true →빌드에서 생성된 파일만 표시되고 더 이상 이전 파일은 표시되지 않는다.

       module.exports = {
         entry: "./src/client/js/main.js",
         mode: "development",
         watch: true,
         plugins: [
           new MiniCssExtractPlugin({
             filename: "css/styles.css",
           }),
         ],
         output: {
           filename: "js/main.js",
           path: path.resolve(__dirname, "assets"),
           clean: true,
         },

10. webpack과 관련된 파일을 저장할때 서버를 재시동하는 것을 방지하는 법

    • nodemon.json파일 만들기
      • nodemon.json파일에 코드

        • ignore → ignore에 설정한 파일들은 무시한다는뜻

        • exec → 감지되었을 때 수행할 명령

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

    • package.json

      • nodemon/webpack 둘다 실행될때 해당json파일을 찾아서 실행시키므로 다음과 같이 간략하게 표현 할 수 있다.

        "scripts": {
            "dev:server": "nodemon",
            "dev:assets": "webpack"
          },