S4) Unit 3. [실습] 간단한 웹앱 번들링 후 배포하기

📣  나만의 아고라스테이츠 번들링 하기

📚 참고 : https://velog.io/@seul_/%EA%B0%84%EB%8B%A8%ED%95%9C-%EC%9B%B9%EC%95%B1-%EB%B2%88%EB%93%A4%EB%A7%81-%ED%9B%84-%EB%B0%B0%ED%8F%AC%EC%9B%B9%ED%8C%A9-%EA%B8%B0%EC%B4%88-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC

서버는 어떻게 연결하지..

얘는 서버 안켜도 데이터가 그대로 뜨는데 왜 React로 한건 안되는거지..!!

𝟭. 현재 디렉토리에 npm 설치하기

npm init -y

➰ package.json 파일 생성

 

𝟮. 웹팩 설치하기

npm install -D webpack webpack-cli

 

𝟯. Webpack.config.js 파일 작성하기

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

➰ 경로가 src/index.js로 되어있기 때문에 src폴더 생성해서 html, js, css파일을 모두 src 폴더 밑으로 옮겨준다.

 

𝟰. js파일 번들링하기

npx webpack

"scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

➰ package.json에 이렇게 설정해놓으면 npm run build로 쉽게 번들링 할 수 있다.

➰ 성공하면 dist 폴더에 app.bundle.js가 생성된다.

 

𝟱. html파일 번들링하기

1️⃣ html-webpack-plugin 설치하기

npm i -D html-webpack-plugin

 

2️⃣ webpack.config.js 파일에 해당 플러그인 등록하기

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html'),
    }),
  ],
};

 

3️⃣ npm run build로 번들링하기

➰ 성공하면 dist 폴더에 index.html이 생성된다.

➰ css는 적용되지 않았지만 index.html 파일은 정상적으로 실행되어야 한다.

 

𝟲. css파일 번들링하기

1️⃣ style-loader 와 css-loader 설치하기

npm i -D style-loader css-loader

 

2️⃣ index.js 파일에서 CSS 파일 임포트 하기

import './style.css";

➰ index.js파일을 기준으로 css파일을 함께 묶어주는 개념이기때문에 css파일과의 연결 관계도 js파일에 명시되어야 한다.

 

3️⃣ webpack.config.js에 설치한 로더 등록

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module : {
    rules: {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html'),
    }),
  ],
};

➰ test 항목에 정의된 정규식에 매칭되는 파일(.css 파일)은 use 항목에 등록된 로더를 통해서 처리된다.

➰ 로더는 css-loader가 먼저 적용되고, styled-loader가 적용된다.

 

4️⃣ npm run build로 번들링하기

➰ index.html 파일을 열면 css가 적용되어 있어야 한다.

 

𝟲. 이미지 파일 불러오기

➰ 이미지는 fileloader를 사용해서 불러와야 한다.

 

1️⃣ file loader 설치하기

npm i file-loader -D

 

2️⃣ webpack.config.js에 설정 추가해주기

{
       test: /\.jpeg$/,
       use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]'
            // 이름이 랜덤한 해시값으로 생성되는 것을 막기 위해 이름을 따로 설정해준다.
           }
         },
       ],
},

 

3️⃣ index.js에 이미지 파일 임포트하기

import './images/cinnamon.jpeg';
import './images/계피_.jpeg';
import './images/tab.jpeg';

 

➰ 이미지도 정확한 이름으로 불러와진다.

---

📣  번들링 후 Github에 배포하기

1️⃣ webpack.config.js 에서 output을 dist에서 docs로 바꿔준다.

2️⃣ 이미 번들링된 dist파일이름을 docs로 바꾼다.(깃헙 페이지 배포가 목표라면 애초에 output을 docs로 설정하고 저장하자)

3️⃣ 빌드를 다 마치고 git push를 실행한다.

4️⃣ 현재 작업 중인 깃헙 리포지토리의 setting- pages에서 source 옵션을 현재 브랜치, root를 /docs 폴더로 설정하고 저장한다.

 

🔗 배포 링크

https://jieuny0314.github.io/fe-sprint-my-agora-states/

My Agora States