웹앱 직접 번들링해보기 + 배포하기

돌리의 하루·2023년 3월 20일
0

아고라 스테이츠의 레퍼런스로 진행했다!

우선, 맨 처음으로

1. npm 활용할 준비를 해준다.

npm init -y

이러면 package.json 파일이 생성된다.

2. webpack을 설치한다.

npm install -D webpack webpack-cli

(-D는 개발단계에서만 이용하는 항목이다.)

3. Webpack.congig.js를 만들고 설정항목 작성

  • entry 항목에는 번들링 하려는 파일을,
  • output에는 압축된 결과물의 파일이름과 경로를 적어준다.

4. js파일 번들링

npx webpack

하면 번들링 결과를 dist/app.bundle.js에서 확인할 수 있다.

이런 어지러운 코드를 본다면 성공이다.
webpack은 사용자가 프론트엔드 웹 애플리케이션을 빠르게 전달받을 수 있도록,
코드를 최소화시킨다. 이런 코드는 악의적으로 편집하기 힘들다.

이 코드가 src에 있는 index와 똑같은지 확인해보려면,

node dist/app.bundle.js

로 확인할 수 있다.

++ package.json에 script로 build항목을 추가설정해주자.
이러면 npm run build로 언제든 번들링 할 수 있다.

5. cs 번들링

1) data.js를 export 해준다. index.js에 데이터를 가져와줘야 하기 때문

2) index.js에는 가져온 데이터를 import해주고 css도 import해준다.
index.js를 기준으로 함께 묶어주기 때문에 연결을 명시해준다.

3) 기본적으로 webpack은 json파일과 JavaScript만 이해하기 때문에, css를 묶어주려면 loader가 필요하다. loader는 그들을 유효한 모듈로 변환해 추가해준다.

  • style loader들 목록

우리에게 지금 필요한 것은
css-loader : css를 js 파일 내에서 불러와줌
style-loader : 불러온 css를 style 요소 내에 담아줌

이 두가지라, npm으로 이 로더를 설치해준 후, webpack.config.js를 조정해준다.

npm i -D css-loader style-loader

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
				// 파일명이 .css로 끝나는 모든 파일에 적용
        test: /\.css$/,
				// 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용
				// 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다.
				// 순서 주의!
        use: ["style-loader", "css-loader"],
				// loader가 node_modules 안의 있는 내용도 처리하기 때문에
				// node_modules는 제외해야 합니다
        exclude: /node_modules/,
      },
    ],
  },
};

css 파일 번들링 이후, index.html에 있는

 <link rel="stylesheet" href="style.css" />

이 부분은 지워도 상관없다! 번들링을 잘 해줬다면~🐦

6. html 파일 번들링 - plugin

npm i -D html-webpack-plugin

설치~!
플러그인은 로더처럼 자바스크립트 파일로 불러오는 작업은 아니지만, 번들링에 유용한 다양한 툴을 적용할 수 있다.

설치 후, webpack.config.js에 해당 플러그인을 적용한다.

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

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

이 후 npm run build로 번들링하면, dist 폴더에 index.html 파일이 생성된 것을 확인 할 수 있다!

css 번들링과 마찬가지로, index.html부분의

<script src="data.js"></script>
  <script src="index.js"></script>

이 부분도 삭제해도 무방하다.

이 후 dist 폴더에 있는 index.html을 열어보면, 다음과 같이 잘 작동하는 것을 볼 수 있다!

++ 배포하기

webpack.config.js에서 output을 dist => docs로 바꿔준다.( github pages 설정에서 docs로 설정해주기 때문에 )

npm i -D webpack-dev-server

위의 코드는 메모리에 올려놓은채로 보여주기 때문에 변경된 코드를 개발 서버에 빠르게 반영해서 보여준다.

그리고 나서 webpack.config.js웹팩도 설정해준다.

devServer: {
  static: {
    directory: path.resolve(__dirname, 'dist'),
  },
    port: 3001, 
},

이 부분은 plugin 밑의 부분에 설정해두었다.

다음엔 package.json에 start : webpack serve~ 코드를 추가해준다.

"scripts": {
    "build": "webpack",
    "start": "webpack serve --open --mode=development",
    "test": "echo \"Error: no test specified\" && exit 1"
},

clean-webpack-plugin

npm i -D clean-webpack-plugin

기존 빌드를 통해 생성되었지만 사용하지 않는 번들 파일을 지우고 싶은 경우 사용하는 플러그인

webpack.config.js에 웹팩을 추가설정해준다.

const {CleanWebpackPlugin} = require("clean-webpack-plugin");

module.exports = {
  ~~~~
  plugins: [new CleanWebpackPlugin()],
};

webpack.config.js의 플러그인 배열 안의 new HtmlWebpackPlugin 뒤에 붙여주었다.

이 후 깃허브의 repository의 setting - page source를 default로 설정 후에 , root를 docs로 설정해준다.

이 후 시간이 지나면 위쪽에 링크가 생기면서 배포된 것을 확인할 수 있다!

profile
진화중인 돌리입니다 :>

0개의 댓글