NPM, WebPack 간단 정리(개인 복습용)

제가 복습하기 위한 용도의 글입니다.
많은 부분 축약되어 있는 점 감안하시기 바랍니다.

NPM

명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매너지입니다.
이 명령어를 통해 다운로드 받는 라이브러리(패키지)들은 모두 NPM 사이트에서 가져오는 겁니다.
node.js 를 설치하면 자동으로 같이 설치됩니다.

NPM 프로젝트 초기화

npm init -y # package json 생성된다.

이후에 package.json 이 생성되고, npm 를 통한 라이브러리 관리에 대한
메타정보들이 package.json 에 작성된다.

NPM 으로 라이브러리 추가

npm i <패키지명>

일반적으로 패키지 설치를 하는 방식이며, 실제로는 npm i <패키지명> --save-prod 와
같은 의미를 갖습니다. 해당 패키지들은 설치가 되면, 추후에 배포시에 실제
애플리케이션 로직의 일부로서 사용됩니다.

예를 들어서 npm i jquery 를 하면 아래와 같이 package.json 파일의
dependencies 속성에 해당 패키지 정보가 추가됩니다.

{
  "name": "webpack_study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.7.0" ==> 이게 추가됩니다!
  }
}

npm i <패키지명> -D

-D 는 --save-dev 의 축약 표현이며, 개발용 패키지 설치를 의미합니다.
npm i webpack webpack-cli -D 라고 입력하면 package.json 에
devDependencies 속성이 생긴것을 확인할 수 있습니다.
여기 있는 패키지들은 배포시에는 포함되지 않게 됩니다.

{
  "name": "webpack_study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.7.0" 
  },
  "devDependencies": { ==> 추가!
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

npm i -g <패키지명>

전역 설치를 의미하며, 이렇게 하면 package.json 에 변화가 안 생기고,
심지어는 node_modules 폴더 하단에 해당 패키지와 관련된 디렉토리가 생성되지 않습니다.
그렇다면 어디에 설치될까요?

# window
%USERPROFILE%\AppData\Roaming\npm\node_modules

# mac
/usr/local/lib/node_modules

이렇게 설치되면, 컴퓨터의 어떤 경로에서든 command line tool 을 켜고
해당 명령어를 입력할 수 있습니다. 대표적으로 vue-cli 같은 게 있습니다.

참고:
버전앞에 있는 ^ 가 뭔지 궁금하면 이 글을 참조하시길 바랍니다.

Webpack 이란?

이제 npm 사용법을 간단히 알았으니, npm 을 통해서 webpack 을 설치할 겁니다.
그런데 그전에 webpack 이라는 게 정확히 뭘까요?

Webpack 이란,
웹 애플리케이션을 구성하는 HTML, CSS, JS, 그외 정적파일 등을 모두 하나의 모듈단위로
관리하며, 최종적이로 이 모듈을 조합하여 하나의 압축된 파일(들)로 변환하는 도구입니다.
좀 유식하게 말하면 번들러(bundler) 입니다.

Webpack 설치

npm i webpack webpack-cli -D 

이러면 일단 설치는 끝납니다만...
사실 webpack 의 실제 기능을 알기 위해서는 Loader 와 Plugin 도 깔아주는 게 좋습니다.
Loader? Plugin? 이게 다 무슨 말일까요?

Webpack 의 4대 요소

• entry : webpack 에서 번들링할 대상(js)
• output : 번들링의 결과물을 뱉어낼 경로 정보
• loader :
  • entry => output 로 변환하는 과정에서 중간에 간섭하는 것입니다.
  • 즉 로더는 파일을 해석하고 변환하는 과정에 관여하는 것이죠.
  • ex1: Webpack 은 js, json 만 이해할 수 있는데, 이미지 파일 같은 것들도 하나의 모듈
    로 관리를 해야합니다. 그래서 이를 위해서 Loader 라는 존재를 통해서 해당 이미지를 사용하여 하나의 모듈로 변환하여 사용합니다.
  • ex2: babel 처럼 트랜스파일링을 위한 용도로도 사용됩니다.
• plugin : 최종 결과물에서 특정 부분(ex: css)를 따로 뽑아내고 싶을 때 사용합니다.

webpack.config.js 를 통한 4대 요소 사용

먼저 npm 을 통해서 아래와 같이 라이브러리를 설치합니다.

npm i css-loader mini-css-extract-plugin style-loader webpack webpack-cl -D

이러고 나서 package.json 에 다음과 같이 script 속성에 하나의 element 를 추가합니다.

{
  "name": "code-splitting",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"  ==> 이걸 추가합니다!
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.8.1",
    "mini-css-extract-plugin": "^2.7.6",
    "style-loader": "^3.3.3",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

이후에 npm run build 를 통해서 해당 명령어를 실행시킬 수 있습니다.

이후에 프로젝트 루트에 webpack.config.js 를 생성하고 아래처럼 작성합니다.
간단한 예시일 뿐입니다. 대충 이런식으로 쓰는 구나 하고 알아두면 됩니다.

// node.js 에서 제공하는 패키지 path 사용
let path = require('path');

// 앞서 npm 을 통해 설치한 플러그인을 import
let MiniCssExtractPlugin = require("mini-css-extract-plugin");


// webpack 이 사용하게 될 실제 내용물을 작성한다.
module.exports = {
  mode: 'none',
  entry: './index.js', // 주요 속성 1. 루트 디렉토리 하단의 index.js
  output: {			   // 주요 속성 2.
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist') // 이러면 "루트디렉토리/dist/bunder.js"
  },
  module: {	// Loader 를 의미한다. 주요속성 3
    rules: [
      // {
      //   test: /\.css$/,
      //   // use: ['style-loader', 'css-loader']
      //   use: ['style-loader', 'css-loader'] // 오른쪽 => 왼쪽 방향으로 적용됨.
      // }
      {
        test: /\.css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          "css-loader"
        ]
      }
    ]
  },
  plugins: [ // 주요속성 4
    new MiniCssExtractPlugin() // 플러그인은 반드시 new 를 통해서 추가해준다.
  ]
}

알아두면 좋은 것들

source-map

bundling 의 결과물 때문에 dev-tool 에서 해당 코드가 어느 파일에서
실해되는지 알기 어려울 수 있는데, 이를 위해서 webpack 에서는 번들링의 결과물의 코드와
해당 코드를 갖고 있는 실제 js 파일을 연결해주는 source map 설정을 할 수 있습니다.

webpack devserver

코드 수정이 바로바로 적용시켜 주는 임시 서버를 생성해준다.
다만 webpack devserver 를 통해서 실행하면, 실제 번들링이 일어난 게 아니라,
번들링의 결과를 메모리에 올려놓고(=in memory) 작동시킨다.

• package.json

{
  "name": "devserver",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.3",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

• webpack.config.js

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

module.exports = {
  mode: 'none',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    port: 9000,
  },
  plugins: [
    new HtmlWebpackPlugin({
      // index.html 템플릿을 기반으로 빌드 결과물을 추가해줌
      template: 'index.html',
    }),
  ],
};

이렇고 npm run dev 하면 devserver 가 실행됩니다.