코딩하는라민

[webpack] webpack & 관련 패키지 설치 및 기본 설정하기 본문

Core

[webpack] webpack & 관련 패키지 설치 및 기본 설정하기

코딩하는라민 2023. 12. 30. 18:22
728x90
반응형

webpack

webpack 이란 의존 관계에 있는 html, css, javascript, 이미지 등과 같은 여러 개의 파일을 하나의 파일 또는 여러 개의 파일로 병합해주는 모듈 번들러이다.
쉽게 말해 여러 개의 javscript 파일을 하나로 묶어서 번들링하므로 script 태그에 여러 개의 javascript 파일을 로드할 필요가 없어진다.

install

npm i -D webpack webpack-cli webpack-dev-server
  • --save-dev === -D : devDependencies

webpack 기본 설정

const path = require("path")
module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
    clean: true,
  },
}
  • entry : javascript 파일의 진입점. 즉, 애플리케이션의 메인 파일
  • output : 빌드된 파일을 저장할 경로(path)와 파일 이름(filename)을 지정
  • clean : 번들 파일이 생성될 경로에 다른 파일 있을 경우 지우고 새로 번들 파일 생성
  • devtool : 빌드 파일과 원본 파일을 연결해주는 source-map
  • mode
    • production : 공백 등을 압축하여 컴팩트하게 빌드. 보통의 경우 production mode 로 사용
    • development : js 에서 작성한 코드가 그대로 빌드

 

추가 plugin

terser-webpack-plugin

install

npm i -D terser-webpack-plugin

webpack.config.js

const Terser = require("terser-webpack-plugin")

module.exports = {
  optimization: {
    minimizer: [new Terser()],
  },
}

 

html-webpack-plugin

install

npm i -D html-webpack-plugin

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: "keyboard",
      template: "./index.html",
      inject: "body",
      favicon: "./favicon.ico",
    }),
  ],
}
  • title : 브라우저의 tab 이름
  • template : 빌드 시 사용할 템플릿 경로
  • inject : 빌드 시 js 파일을 넣어줄 태그

 

lodash

  • 다양한 유용한 함수들을 제공하는 오픈 소스 라이브러리
  • 유틸성 메서드나 템플릿 관련 메서드를 제공해주는 라이브러리

index.html 에 lodash 문법 사용하기

<head>
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

→ html-webpack-plugin 플러그인이 index.html 안에서 lodash 문법을 사용할 수 있게 해준다.

 

mini-css-extract-plugin, css-loader

install

npm i -D mini-css-extract-plugin css-loader
  • mini-css-extract-plugin : CSS 코드를 별도의 파일로 추출
  • css-loader : CSS 파일을 읽고 Webpack이 이해할 수 있는 모듈로 변환. CSS 파일 내에서 @import 및 url(...)과 같은 다른 리소스를 해석하고 처리하는 역할

요약하면, 개발 및 프로덕션 환경에서 CSS를 관리하고 분리하는 데 사용

webpack.config.js

const MiniCssExtract = require("mini-css-extract-plugin")

module.exports = {
  plugins: [
    new MiniCssExtract({
      filename: "style.css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtract.loader, "css-loader"],
      },
    ],
  },
}

 

Webpack에서 CSS를 최적화하기 위한 플러그인

install

npm i -D css-minimizer-webpack-plugin
  • CSS 코드를 압축하고 최적화하여 불필요한 공백을 제거하고, 속성을 축약하며, 기타 최적화 작업을 수행

webpack.config.js

const Terser = require("terser-webpack-plugin")
const CssMinimizer = require("css-minimizer-webpack-plugin")

module.exports = {
  optimization: {
    minimizer: [new TerserPlugin(), new CssMinimizer()],
  },
}
  • 일반적으로 production mode 환경에서 terser-webpack-plugin 와 같이 사용한다.

 

정리

  • terser-webpack-plugin : Javascript 코드 압축
  • css-minimizer-webpack-plugin : CSS 코드 압축
  • 프로덕션 환경에서 번들된 자원을 최적화하기 위해 사용
  • optimization 객체를 통해 웹팩의 최적화 옵션을 설정할 수 있으며, 여기에는 minimizer 속성이 포함되어 최적화 플러그인을 지정 가능

eslint, prettier

install

eslint 설치

npm i -D eslint

 

prettier 설치

npm install --save-dev --save-exact prettier
  • --save-exact : 해당하는 버전 설치

포맷팅 기능 추가

npm i -D eslint-config-prettier eslint-plugin-prettier

eslint 와 prettier 가 겹치는 포맷팅 룰이 있다.

  • eslint 는 문법적인 오류를 정적으로 찾아주고(주), 코드 포맷팅 기능(부)을 한다.
  • prettier 는 포맷팅 기능(주)을 한다.

 

따라서

  • eslint-plugin-prettier : eslint 에 prettier 의 포맷팅 기능을 추가해준다.
  • eslint-config-prettier : eslint 와 prettier의 겹치는 포맷팅을 비활성화해준다.

eslint 설정

npx eslint --init

.eslintrc

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}
  • extends : eslint 에서 제공하는 다른 스타일 적용 가능

.prettierrc.json

저장 시 자동 실행

settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

 

 

 

참고 : 본 포스팅은 패스트캠퍼스 강의(30개 프로젝트로 배우는 프론트엔드 with React) 를 수강하고 공부한 내용을 정리했습니다.

728x90
반응형
저작자표시 비영리 변경금지