프론트 개발 환경 구성 - webpack

ddullgi·2023년 4월 19일
npmwebpack개발환경
0

프론트 개발 환경 구성

목록 보기
1/4
post-thumbnail

프로젝트 초기화


init

$ npm init

package name:
version:                                            
description:
entry point:                                     
test command:                                            
git repository:                                            
keywords:                                              
author:                                               
license:

npm init 명령어를 실행하면 패키지 이름, 버전 등의 프로젝트 와 관련된 정보를 답변하면 pacakge.json 파일을 생성해 준다.

모두 기본 값을 사용한다면 npm init -y 명령어를 통해 생성하면 된다.


Package.json

Node.js는 package.json 파일에 프로젝트의 모든 정보를 기록합니다.

{
  "name": "learn-react",
  "version": "1.0.0",
  "description": "learn react",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
  • name: 프로젝트 이름
  • version: 프로젝트 버전 정보
  • description: 프로젝트 설명
  • main: 노드 어플리케이션일 경우 진입점 경로. 프론트엔드 프로젝트일 경우 사용하지 않는다.
  • scripts: 프로젝트 명령어를 등록할 수 있다.초기화시 test 명령어가 샘플로 등록되어 있다
  • author: 프로그램 작성자
  • license: 라이센스

프로젝트 명령어

생성한 프로젝트는 package.json에 등록한 scripts를 이용해 실행한다.


package.json

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --progress",
    "start": "webpack-dev-server"
  }
}
  • build : 추후 작성할 webpack.config.js 파일에 설정해 놓은 webpcak 설정을 실행하여 프로젝트를 빌드 합니다.
  • start : 추후 작성할 webpack-dev-server를 실행합니다.

기본 폴더 구성

root
|-- package.json
`-- src
	`-- App.js


webpack

webpack 은 여러개 파일을 하나의 파일로 합쳐주는 번들러(bundler)다. 하나의 시작점(entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다.


webpack 설치

$ npm install -D webpack webpack-cli

webpack 패키지와 webpack 터미널 도구를 설치한다.


dependencies 와 devDependencies

npm으로 설치한 패키지는 package.json 에 dependencies 와 devDependencies에 기록된다. 이 둘 모두 개발 환경에서는 차이없이 모두 동작하지만 배포 환경에서 차이를 가지게 된다. 일반적으로 번들러로 build한 결과물을 배포하게 되는데, 이 때 dependencies 에 있는 패키지들은 배포할 때 포함되고 devDependencies에 있는 패키지들은 포함되지 않는다. 예를 들어 webpack과 같은 번들러는 번들링이 완료된 이후 프로젝트를 구동하는데 전혀 필요없는 패키지이다. 만약 이런 필요없는 패키지들이 배포환경에 포함되게 된다면 빌드 시간도 오래 걸리고, 웹페이지 로딩시간도 오래걸리게 된다. 이를 devDependencies를 이용하여 최적화 할 수 있다.

npm install 명령어 뒤에 --save-dev 나 -D를 포함시키면 devDependencies로 설치할 수 있다.


webpack.config.js 파일 생성

webpack의 설정을 저장해 놓은 파일이다.
root 폴더에 webpack.config.js파일을 생성


mode 설정

webpack 설정 파일에 실행 모드를 정의 합니다


webpack.config.js

const path = require("path")

module.exports = {
  mode: "development",
}
  • mode : webpack의 실행 모드를 의미한다.
    • mode 매개 변수는 다음 3가지 값 중 하나를 사용할 수 있다.
      • development : 개발 모드
      • production : 배포 모드 (기본 값)
      • none : 기본 최적화 옵션 해제
    • production 모드는 webpack 모듈 번들링 과정에서 자체적으로 코드를 최적화하여 용량을 줄입니다.

entry/output 설정

webpack 설정 파일에 번들링의 시작 점인 entry point와 번들의 결과물이 생성 될 장소인 output을 설정해줘야 한다.


webpack.config.js

module.exports = {
  // ...
  entry: {
    // 번들러의 시작 파일 설정(의존의 시작점)
    main: "./src/app.js",
    sub: "./src/sub.js",
  },
  output: {
	// 빌드 파일의 이름을 동적으로 설정
    filename: "[name].js",
	// 빌드 파일의 위치 설정
    path: path.resolve("./dist"),
  },
}

  • entry : 번들러의 시작 점 경로를 설정하는 옵션이다.

    • 시작 점을 여러 개 설정할 수 있다. (각각의 경로를 시작 점으로 여러 개의 결과물을 생성함)

  • output : 번들링의 결과물이 위치할 경로이다.

    • filename 모듈의 [name] 부분에 entry 에서 설정한 main과 sub가 오게 된다.

      • 위 의 예시의 경우 두 가지 결과물이 생성된다.

    • 절대 경로를 사용하기 때문에 path 모듈의 resolve() 함수를 사용해서 계산한다. (path는 노드 코어 모듈 중 하나로 경로를 처리하는 기능을 제공한다)


devServer 설정

프로젝트를 build하지 않고 빠르게 실행해 볼 수 있는 간이 서버를 설정한다.


webpack-dev-server 설치

$ npm i -D webpack-dev-server

webpack.config.js

module.exports = {
  // ...
  stats: "errors-only",
  devServer: {
    open: true,
    port: 8080,
    proxy: {},
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
      progress: true,
    },
    historyApiFallback: true,
  },
}
  • stats : npm start를 돌리고 node 콘솔에 나타나는 메세지 수준 조절한다.
  • devServer
    • open : 서버가 시작된 후 브라우저를 열도록 dev-server에 지시합니다. 기본 브라우저를 열려면 true 로 지정한다.
    • port : 개발 서버 포트 번호를 설정한다. 기본 값은 8080
    • proxy : 다른 주소의 서버를 사용할 경우 프록시 설정으로 cors error 방지 가능
    • client
      • overlay : 빌드 시 에러나 경고를 브라우저 화면에 표시한다.
      • progress : 브라우저에서 컴파일 진행률을 백분율로 출력한다.
    • historyApiFallback : 히스토리 API를 사용하는 SPA 개발 설정한다. 404가 발생하면 index.html로 리다이렉트 한다.

loader 설정

loader는 엔트리 포인트부터 연결된 모든 파일을 탐색하다가, 명시된 패턴의 파일들을 만나면 설정된 loader를 이용하여 파일을 변환하는 과정을 실행한다. 이렇게 변환된 파일은 다시 번들링되어 최종 결과물로 출력된다.

보통 웹팩은 JavaScript 파일만 번들링할 수 있지만, 로더를 사용하여 다양한 종류의 파일을 번들링할 수 있도록 모듈로 변환해 준다. 즉, CSS파일이나 타입스크립트 같은 파일을 번들링 하지 못합니다. 이를 css-loader, ts-loader 등을 통해 번들링 할 수 있게 변환해준다.


자주 사용하는 loader


CSS-loader

css-loader는 빌드된 자바스크립트 파일 안에 CSS 코드를 변환하여 넣어준다. 단, 이렇게 들어간 CSS 코드는 html에 적용되지 않는다.


style-loader

style-loader는 자바스크립트로 변환된 CSS코드들을 html로 변환해 준다.


file-loader / url-loader (webpack4 버전의 방식)

정적파일(이미지, 폰트 등)과 url을 로딩해준다.

  • url-loader 파일을 data URI 형식으로 번들에 인라인 추가 할 때
  • file-loader 파일을 출력 디렉터리로 내보낼 때

asset modules (webpack5 버전의 방식)

로더를 추가로 구성하지 않아도 애셋 파일(폰트, 아이콘 등)을 사용할 수 있도록 해주는 모듈이다.


loader 설치

$ npm i -D css-loader style-loader

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      // 엔트리 포인트 부터 연결된 모든 파일을 순회하다 명시된 패턴의 파일들을 만나면 설정된 로더를 이용하여 파일을 돌린다.
      {
        // 로더가 처리해야되는 파일들의 패턴을 설정한다. (정규 표현식 사용)
        test: /\.s?[ac]ss$/i, // .css 확장자를 가지는 모든 파일을 로더로 돌리겠다는 의미
        // 사용할 로더를 명시
        // 로더는 한 패턴에 대하여 여러개를 실행할 수 있습니다.
        // 순서는 뒤에서부터 앞으로 실행된다.
        // 즉, css-loader 실행 후 style-loader를 실행한다. (순서 중요!)
        use: ["style-loader", "css-loader"],
        // css-loader의 경우 빌드된 js 안에 css 코드를 변환하여 넣어주기만 하기때문에 후처리를 통해 html에 적용되게 설정해야된다.(css-loader만으로는 바로 적용되지 않음)
        // style-loader는 자바스크립트로 변환된 style 코드를 html로 넣어주는 로더이다.
      },
      //* webpack5는 자체 설정으로 asset 로드를 설정한다.
      // asset/resource : 별도의 파일을 내보내고 URL을 추출 (file-loader 대체)
      // asset/inline : asset의 data URI를 내보낸다. (url-loader 대체)
      // asset/source : asset의 소스 코드를 내보낸다. (raw-loader 대체)
      // asset은 data URI와 별도의 파일 내보내기 중에서 자동으로 선택
      {
        test: /\.(gif|jpe?g|png|webp|svg)$/i,
        type: "asset",
      },
    ],
  },
}

플러그인 설정

로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다.


자주 사용하는 플러그인


html-webpack-plugin

빌드 결과물이 있는 output 경로에 html 파일을 생성해 준다. 주로 public/index.js파일을 결과물로 빌드해 준다.


clean-webpack-plugin

빌드 명령어 실행 시 이전에 빌드한 결과물들을 제거해 준다.


mini-css-extract-plugin

원래 빌드 결과인 js 파일에 css가 포함되어 있는데 이를 분리해준다.


플러그인 설치

$ npm i -D html-webpack-plugin clean-webpack-plugin mini-css-extract-plugin

webpack.config.js

// ...
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // ...
  // plugin을 클래스로 만들기 때문에 new를 써서 선언해준다.
  plugins: [
    // output 경로에 html 파일을 생성해준다.
    new HtmlWebpackPlugin({
      // 템플릿 경로를 설정한다.
      template: "./public/index.html",
      minify: {
        // 공백 제거
        collapseWhitespace: true,
        // 주석 제거
        removeComments: true,
      },
    }),
    // 빌드 명령어 실행 시 이전에 빌드한 결과물들을 제거해 준다.
    new CleanWebpackPlugin(),
    // 원래 빌드 결과인 js 파일에 css가 포함되어 있는데 이를 분리해준다.
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  ],
}
profile
ddullgi
프론트엔드개발자를 꿈꾸는 예비 개발자
다음 포스트

프론트 개발 환경 구성 - babel

0개의 댓글