📚 웹팩 시작하기 ! 01 (loader의 정의 그리고 자주 사용하는 로더)

https://webpack.js.org/

webpack

👩🏻 이번에는 웹팩으로 번들링 작업 해보려고 해요. 번들링 작업 할 때는 웹팩 패키지와 웹팩 터미널 도구를 설치해줘야 합니다. 주의해야 될 점이 있는데, 웹팩은 현재 버전 5 까지 나왔거든요. 하지만 저는 버전 4를 설치하는 것을 추천드립니다. 왜냐하면 좀 더 뒤로 나갈수록 플러그인도 알아볼텐데 버전 5 는 플러그인 설치시 아직까지 지원 안되는 것들이 많더라구요. ㅠㅠ

 

설치명령어

$npm install -D webpack-cli
$npm install --save-dev webpack@(버전수)

여기서 -D 는 개발용 dependencies를 뜻합니다. 웹팩 번들링 할 때 필요한 기본 패키지들을 설치 하셨다면 웹팩 환경설정 해주는 파일들을 만들어 볼거에요. [webpack.config.js] 라는 파일명 또는 [webpackfile.js] 파일명 중 더 맘에 드는 이름을 골라 웹팩 환경설정 파일을 만들어주세요. 😀저는 [webpack.config.js]로 만들었습니다. 

 

그리고 웹팩을 실행할 때는 필수적인 옵션이 있어요.

👉 [webpack.config.js]


const path =  require('path');

module.exports = {
  mode: 'development',
  entry: {
    main : './src/app.js',
    main2 : './src/app2.js',
  },
  
  output: {
    path: path.resolve('./dist'),
    filename : '[name].js'
  }
} 

 

1. mode : development, production, none이 있는데 개발환경이냐 운영환경이냐에 따라서 development, production을 설정합니다.

• development : 개발용 정보를 추가할 때
• production : 운영에 배포하기 위한 것

2. entry : 모듈의 시작점 입니다.

3. output : 엔트리를 통해 모든걸 하나로 합치고 경로를 저장하는 것을 아웃풋으로 설정해줍니다.

 

이 모든 설정을 끝내셨으면, 터미널 창에 아래 명령어를 실행해보세요!

$node_modules/.bin/webpack --mode development --entry ./src/app.js --output dist/main.js

그럼 여러개의 모듈을 하나의 파일로 만들어지게 됩니다. 아웃풋 폴더 명을 dist라고 설정했으니 dist라는 폴더가 생겼을거에요 😃그리고 packages.json 파일에서도 저희가 설정해 줘야 할 것이 있어요.

👉 [package.json]


{
  "name": "fn_dev_env",
  "version": "1.0.0",
  "description": "<br>",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    👉🏻 "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1"
  },
  "devDependencies": {
    "webpack": "^4.46.0",
    "webpack-cli": "^4.5.0"
  }
}

여기서 build를 webpack으로 설정하면

$npm run build

터미널창에 이 명령어를 입력했을 시, 현재 프로젝트에 있는 노드 모듈을 뒤져서 웹팩 명령어를 찾아줘요. 그럼 웹팩은 기본  [webpack.config.js] 파일을 읽어서 번들링 해줄 것 입니다. 

 

---

 

👩🏻 이제는 로더와 자주 사용하는 로더를 알아볼 것 입니다.

로더

웹팩은 모든 파일을 모듈로 바라봅니다. 자바스크립트로 만든 모듈 뿐만 아니라, css, 이미지, 폰트도 전부 모듈로 보기 때문에 import 구문을 사용하면 자바스크립트 코드 안으로 가져올 수 있어요. 이것이 가능한 이유는 웹팩의 로더 덕분이랍니다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URI 형식의 문자열로 변환해주기도 해요. 뿐만 아니라 css 파일을 자바스크립트에서 직접 로딩 할 수 있도록 도와준답니다.

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [path.resolve("./my-webpack-loader.js")],
      },
    ],
  },

로더를 사용할 때는 이렇게 모듈 객체 안에다가 rules 객체를 만들어 rules 안에 배열로 객체화해서 사용할 로더들을 설정해 주면됩니다. 처리할 파일은 test에 위 코드처럼 정규표현식으로 명시해주세요. 

• test : 로더를 적용할 파일 유형을 뜻합니다.
• use : 해당 파일에 적용할 로더 이름입니다.

 

자주 사용하는 로더

로더를 사용할 때는 로더 패키지를 설치해주셔야 됩니다.

 

1. CSS-loader

$npm install css-loader style-loader

css 로더를 사용하고 싶다면 이 파일이 JS로 변환될 때 style-loader도 같이 설치해 주셔야해요. 

 

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

먼저 설치한 패키지가 뒤로 가는 순서로 입력해주셔야 합니다 !

 

2. image-loader

$npm install file-loader

다음으로 자주 쓰일 로더는 이미지로더입니다. 위 명령어를 통해 패키지를 설치해주세요. 

{
        test: /\.jpg$/,
        loader: "file-loader",
        options: {
          pubilcPath: "./dist/",
          name: "[name].[ext]?[hash]", //이름.확장자?해시값
        },
      },

얘도 css 로더와 마찬가지로 rules 안에 선언하시면 됩니다. options에 있는 publicPath는 이 이미지들이 담길 공간을 의미해요. publicPath는 파일로더가 처리하는 파일을 모듈로 사용했을 때 경로 앞에 추가되는 문자열입니다. 쉽게말해 아웃풋을 dist로 설정했으니 pubilcPath도 같은 경로로 동일하게 dist로 설정해줘야 해요!

이번에는 여러 이미지 사용시 data URI로 처리하는 방법입니다. 사용하는 이미지 갯수가 많다면 네트워크 리소스를 사용하는 부담이 있고 사이트 성능에 영향을 줄 수도 있어요. 한 페이지에서 작은 이미지를 여러개 사용한다면 data URI scheme를 이용하는 방법이 더 낫습니다.

$npm install url-loader

패키지를 설치하셨으면 이제 웹팩 환경설정을 해봅시다.

 

{
        test: /\.(jpg|png|gif|svg)$/,
        loader: "url-loader",
        options: {
          publicPath: "./dist/",
          name: "[name].[ext]?[hash]",
          limit: 20000,
        },
      },

test에 jpg 뿐만 아니라 여러 확장자를 번들링 해주고 싶다면, (확장자명|확장자명|확장자명) 이렇게 띄어쓰기 없이 설정해주시면 됩니다. 그리고 로더는 url-loader로 설정합니다. 여기서 새롭게 추가된 limit은 파일 용량으로 아웃풋을 해주냐, 아니면 data uri로 뿌려주냐 설정해주는데요. 여기서 20000은 20kb를 의미해요. url-loader가 이미지 파일들을 처리할 때 용량이 20kb 미만은 url-loader로 해서 bath 64로 변환처리 해줍니다. 그 이상이면 file-loader로 실행되어 파일이 dist 폴더에 복제된 걸 볼 수 있어요.

이외에도 ts 로더, sass 로더, babel 로더가 있습니다.

npm install --save-dev typescript ts-loader

webpack.js.org/guides/typescript/#loader

TypeScript | webpack

 

 

로더 마무리

 module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(jpg|png|gif|svg)$/,
        loader: "url-loader",
        options: {
          publicPath: "./dist/",
          name: "[name].[ext]?[hash]",
          limit: 20000, //파일 용량도 설정이 가능하다 2kb
        },
      },
    ],
  },

 

이처럼 로더를 사용하고 싶다면 모듈안에 rules 객체를 만들어 이 안에서 배열로 로더 객체를 만들어 설정하시면 됩니다! 웹팩 다루는 기본기만 알아두면 다른 로더들도 사용할 때 쉽게 설정할 수 있을 겁니다. 지금은 가장 대표적인 css로더와 이미지 로더를 알아봤는데, 다음에는 ts로더와 sass로더 스프라이트 이미지 만드는 방법도 알아보고 정리해 보겠습니다.