Webpack 이란? + 누구나 사용할 수 있다

Webpack 이란 무엇인가

Webpack은 번들러입니다.

우리가 작성한 Web application 내에서 사용되는 모든 자바스크립트 파일을 하나의 js 파일로 만들어줍니다.

(꼭 한개가 아니라, 설정 값에 따라서 여러개로 만들수도, js 뿐만 아니라 css,이미지,폰트 등도 합칠 수 있습니다)

 

번들링 해보기

npm i webpack webpack-cli

webpack을 설치하고, 명령어로 webpack을 실행할 수 있게끔, cli도 설치합니다

 

webpack.config.js

module.exports = {
  mode: "development",
  context: __dirname + "/src",
  entry: "./index.js",
  output: {
    path: __dirname + "/",
    filename: "main.js",
  },
};

• mode: 모드
• context : 번들링할 js 파일들의 context (위치)
• entry : 시작점이되는 js 파일
• output : 번들링된 결과물의 파일 경로와 파일이름 옵션

entry에서 번들링될 결과물의 이름을 미리 적어두면, [name]으로 참조가 가능하게됩니다.

module.exports = {
  mode: "development",
  context: __dirname + "/src",
  entry: {
    kong: "./index.js",
  },
  output: {
    path: __dirname + "/",
    filename: "[name].js",
  },
};

 

또한 mode: development or production 모드가 있는데, 전자의 경우 가독성이 좋고, 후자의 경우 최대한 압축을 한합니다.

---

여기까지가 기본이었습니다.

하지만 css, image 파일들도 모두 번들링 하려면 어떻게 해야할까요?

 

지금 상태로는 아래와 같이 css 파일은 불러오지 못합니다.

import { sum } from "./math.js"; // O
import  "./main.css";   // X

css 파일을 불러와 사용하기 위해서는

webpack loader 가 이역할을 도와줍니다.

 

css를 불러와줄 수 있는 loader를 설치합니다.

npm i css-loader

 

webpack.config.js 아래와 같이 수정

module.exports = {
  mode: "development",
  context: __dirname + "/src",
  entry: {
    kong: "./index.js",
  },
  output: {
    path: __dirname + "/",
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["css-loader"],
      },
    ],
  },
};

module>rules를 추가합니다.

test: 적용할 파일(일반적으로 정규식을사용)

use : [적용실킬 loader]

 

이렇게 적용하고 webpack을 번들링하면 output 파일에는 적용되어있으나 style적용이 되지 않습니다. 왜냐하면 css-loader는 단순히 css 를 불러오도록 도와주지 , 그것을 style태그로 적용시켜주는 역할은 하지 않기 때문입니다.

 

그럼 추가적으로 loader하나를 더 설치합니다.

npm i style-loader

 

webpack.config.js 에도 추가해줍니다

module.exports = {
	...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

주의할 점은 먼저 적용시킬 loader를 뒤로 배치해야 한다는 점입니다.

이렇게 적용하고 다시 번들링을 해보면 잘 적용된것을 확인할 수 있습니다.

 

babel 이나 webpack 같은 툴들을 어렵사리 보이게만드는 것은 개인적으로 정규식이라고 생각합니다. 정규식만 뺴놓고 보면 별다를 꺼없는 빈 오브젝트에 property만 추가해주는 일밖에없고, key값들도 모두 직관적으로 작성할 수 있게 되어있습니다. 다음엔 정규식에 대해서 포스팅 해보겠습니다.