본문 바로가기
Web/Frontend

npm과 Webpack

by simply._. 2024. 8. 25.

목차

    프론트엔드 개발자를 위한 웹팩을 수강하며 정리한 글입니다.

    참고 자료

    npm

    • Node Package Manager의 약어
    • Javascript Library를 관리해 주는 도구
    • npm Homepage

    장점

    • 쉬운 버전 관리
      • 기존 script 태그를 찾아 일일이 버전 정보 수정
      • npm package.json 파일에서 모든 라이브러리 버전 정보 관리 가능
    • import 정보 찾는 과정 생략
      • 기존 script 태그 내 src 등의 입력값을 인터넷에서 검색해 입력
      • npm install 명령어로 검색 없이 라이브러리 설치

    초기화 (init)

    npm init     #초기화
npm init -y  #기본값으로 초기화 (추천)
    • package.json 생성

    지역 설치 (install)

    npm install {라이브러리 이름}
npm i {라이브러리 이름}
    • node-modules 폴더 내 라이브러리 폴더 생성
    • package.json 내 의존성 추가
    • Options
      •  --save-dev    -D   devDependencies에 추가 (개발용 라이브러리, 보조용으로 개발 시 필요)
      •  --save-prod         dependencies에 추가 (배포용 라이브러리, 프로젝트 동작 시 필요)
      •  npm run build  devDependencies 미설치, dependencies만 설치

    제거 (uninstall)

    npm uninstall {라이브러리 이름}

    전역 설치 (--global)

    npm install {라이브러리 이름} --global
npm install {라이브러리 이름} --g
    • 프로젝트가 아닌 시스템 레벨에서 사용할 라이브러리
    • "라이브러리 이름"으로 된 명령어 사용 가능 (명령어가 존재하는 경우)
    • 설치된 경로
      • Windows %USERPROFILE\AppData\Roaming\npm\node_modules
      • Mac /usr/local/lib/node_modules

    Webpack

    최신 프론트엔드 프레임워크에서 가장 많이 사용되는 Module Bundler

    • Module Bundler
      • 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript 등) = Module 
      • Module을 조합해 하나의 결과물을 만드는 도구
    • Module Bundling
      • 웹 애플리케이션을 구성하는 여러 자원을 하나의 파일로 병합 및 압축
    • 공식 문서 https://webpack.js.org/concepts/

    실행 방법

    npm i webpack webpack-cli   # webpack, webpack-cli 설치
    # package.json에 아래 설정 추가
"scripts": {
    "build": "webpack"
}
    npm run build  # build 실행

    속성 설정

    webpack --mode=none --entry=src/index.js --output=public/output.js
    // webpack.config.js
var path = require("path");   // path 라이브러리 사용
var MiniCssExtractPlugin = require("mini-css-extract-plugin");  // CSS 파일 별도 추출

module.exports = {
  mode: "none",
  entry: "./src/index.js",    // 최초 진입점
  output: {                   // webpack 결과물 저장 정보
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {   // loader 설정
    rules: [
        {
            test: /\.css$/,
            use: [
                { loader: MiniCssExtractPlugin.loader },
                'css-loader'
            ]  // 순서도 중요, 오른쪽에서 왼쪽으로 적용
        }
    ]
  },
  plugins: [
  	new MiniCssExtractPlugin() // CSS 파일도 빌드 결과물에 포함
  ]
};

    성능상 장점

    • Webpack 적용 후, 개발자 도구 > Network 창 확인
    • 서버에 요청해서 받아오는 파일 수가 적어, 요청 시간이 줄어든다는 장점
    Babel
    Javascript 최신 문법(ES6 등)을 많은 브라우저가 읽을 수 있는 문법으로 변환해 주는 도구

     

    Source Map

    • Webpack으로 Bundling 처리된 Javascript는 보기 어려운 상태
    • 그러면 개발 시 디버깅이 힘들기 때문에, 빌드 결과물과 원본 파일을 연결해 주는 기능 지원
    • webpack.config.js에서 devtool: 'source-map' 설정

    주요 속성

    entry

    • 앱 자원을 변환하기 위해 필요한 최초 진입점, Javascript 파일 경로
    • 웹 애플리케이션의 전반적인 구조와 내용이 담겨 있는 파일로 지정
    • 여러 개 설정 가능 (MPA에 적합)

    output

    • Webpack 실행 후의 결과물을 저장할 파일 경로

    loader

    • 웹 자원(HTML, CSS, Images 등)을 변환할 수 있도록 도와주는 속성

    plugin

    • 기본적인 동작에 추가적인 기능을 제공 (ex. 결과물에 대한 정보를 변형)
    • 생성자 함수로 생성한 객체 인스턴스만 추가 가능

    resolve

    • 파일 간의 연관 관계를 해석하는 방법
    • extensions에 정의된 확장자는 import문에서 확장자를 표기하지 않아도 OK

    Dev Server

    • 기존에는 코드를 바꿀 때마다 다시 build 후 server를 실행하는 과정 반복 → 번거로움
    • 코드만 변경하고 저장하면, 자동으로 빌드 후 브라우저를 새로고침 해주는 기능
    • 빌드 결과물을 프로젝트 폴더에서 확인 불가
      • 인 메모리에 빌드 결과물을 저장
      • 파일을 생성하고 읽는 것보다 메모리에 쓰고 읽는 것이 시간, 공간 효율적
    // package.json
{
    "scripts": {
    	"dev": "webpack-dev-server"
    }
}

// webpack.config.js
module.exports = {
    devServer: {
    	port: 9000,
    }
}
    반응형

    티스토리툴바