일단 로더에 관한 개념을 알아보자.

css라는 파일을 만들어보자.

css 파일을 만들어 link 하기 위해서 css 파일 부터 만들어야 하고, 그 후 link 태그를 추가해 외부 스타일시트를 가져오도록 하는 것이 일반적이다.

하지만 이렇게 되면 css 파일 하나당 또 한번의 connection 을 해야 하게 되어 기존의 js 를 묶어 한번에 처리했던 의미가 퇴색되게 된다. 이를 또 webpack이 해결해준다.

다시 한번 위 그림을 보자.

webpack 이 무엇인가를 바로 알 수 있게 해주는 그림이다. 저기 보면 sass 나 css, png 조차도 번들링해주는 것도 알 수 있다. 이 역할을 해주는 애가 바로 로더이다.

미리 말하겠지만 사회나가서 webpack을 얼마나 잘 알고있냐를 판가름하는 것이 이 "로더" 를 얼마나 잘 알고있냐가 될 정도로 중요한 놈이다.

webpack의 guide 페이지로 가면 Asset Management 라는 탭이 있다. Asset 이란 자산으로 우리가 코딩한 js, css 파일들을 의미한다. 여튼 여길 보면 로더를 사용하기 위해서 다음과 같은 명령어를 치라고 나와있다.

npm install —save-dev style-loader css-loader

그 후 webpack.config.js 파일을 다음과 같이 수정하라고 되어있다.

• css-loader

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          'css-loader',
        ],
      },
    ],
  },
};

저 코드 중 css-loader 를 추가함으로써 webpack을 동작시켯을때 확장자가 css파일을 만나게 되면 로더가 알아서 해당 css 파일을 로더 안으로 로드시켜주게 된다.

// src/index.js
import hello_word from './hello.js'; 
import world_word from './world.js';
import css from './style.css';
document.querySelector('div#root').innerHTML = hello_word + ' ' + world_word;

index.js 파일을 다음과 같이 바꿔준다.

그 후 번들링 한 이후 실행시켜주게 되면 css 라는 변수에 style.css 안의 내용들이 리스트화되어 들어가있는 것을 확인 할 수 있다. 즉, 이 리스트 요소를 컨트롤 해서 css를 디자인할 수 있는 것이다.

허나 직접 리스트 요소들을 사용할 필요 없이 이 적용을 자동화해주는 로더가 있다.

• style-loader

바로 style-loader 이다. 이 로더를 추가해준 webpack.config.js 파일을 다음과 같다.

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
					'style-loader',
          'css-loader',
        ],
      },
    ],
  },
};

즉 정리하자면 css-loader 는 css 파일을 읽어와서 그것을 webpack으로 가져오는 녀석이고, style-loader 는 그렇게 가져온 css 코드를 web page 안에 style 코드로 주입시켜주는 놈이다. 거의 짝꿍인 것이다.

여튼 이런식으로 config 파일을 수정해주고 다시 실행해주게 되면 index_bundle.js 하나만 connection 하여 가져오게 되었는데 css, js 모두 적용된것을 확인할 수 있다.

webpack.config.js 에 추가했던 코드 중에 다음 코드를 보자.

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

저기서 test: /\.css$/ 라는 문구가 있는 것을 볼 수 있다. 저 코드의 의미는 .css 로 시작하는 파일이 발견되면 밑의 로더들을 통과시켜 처리해라 라는 조건형식의 의미이다.

이 때 중요한 것은 밑쪽에 적혀있는 loader 일수록 늦게 시작된다는 것이다. 즉 밑에서 부터 차근차근 사용되는 " 체이닝" 이 된다는 것이다.

이러한 것을 적용시켜 이미지 로더, 폰트 로더 등등 여러가지 로더가 있다. 이러한 로더 중 official 하게 제공되는 로더, 커스텀화된 로더 들이 있으니 알아서 찾고 사용하면 될것이다!!!

이제 로드를 한 이후 어떻게 최종적인 파일의 이름 및 결과를 만들어낼 것인가를 알아보자. 즉, 하나로 합칠건지 쪼갤건지 설정하는 방법에 대해 알아보자.

OUTPUT 파트를 좀더 알아보자.

여러가지 엔트리 파일이 있는 경우 어떤식으로 config 파일을 처리해야 할까?

// webpack.config.js 파일
const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index:'./src/index.js',
    about:"./src/about.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
};

config 파일을 다음과 같이 바꿔주자.

추가된 코드는 entry 부분이다. 객체화 시켜 2개의 속성으로 구분하여 나누었다. 그 후 output 부분도 바꼈는데 [name] 으로 나타내서 저 부분에 index 또는 about 값이 들어가잇는 것을 확인할 수 있다.

이렇게 output을 두개로 쪼개 나타낼수도 있다.

또 다른 방법으로 하는 것이 많은데 역시 webpack document 를 검색해서 알아보는 것이 좋다. 외울 필요가 없다는 말이다.

참고로 [name], [id], [hash] 등 여러 방법이 있으니 검색해서 알아보자.

webpack에는 2가지의 확장 기능이 있다.

첫번째는 앞에서 배웠던 로더이고, 두번째는 플러그인이다.

로더는 우리가 가지고 있는 모듈을 최종적인 아웃풋으로 만들어가는 과정에서 사용되는 것이고, 플러그인은 그렇게 해서 만들어진 최종적인 결과물을 변형하는 것이라고 생각하면 된다.

플러그인이 더 복합적이고 자유로운 일들을 할 수 있도록 해준다는 것을 알고 있자.

플러그인은 플러그인마다 사용방법이 제각각 다르다.

때문에 다 배울필요는 없고 하나정도만 사용해보고 그 방법만 숙지하자.

webpack document에 들어가서 플러그인 탭에 들어가면 여러가지 플러그인들이 있는 것을 볼 수 있다. 그 중에서 HtmlWebpackPlugin 을 살펴보자.

코딩 과정에서 html 파일을 자동으로 생성하고 싶거나 template 화 해서 벽돌찍듯이 html 파일을 생성하고 싶을 수 있다.

이 때 저 플러그인을 쓸 수 있다.

플러그인 다운받는 방법은 다음 명령어만 치면 된다.

npm install —save-dev html-webpack-plugin

그리고 webpack.config.js 파일을 다음과 같이 바꿔준다.

// webpack.config.js 파일
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index:'./src/index.js',
    about:"./src/about.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      filename:'./index.html'
    })
  ]
};

다음과 같이 config 를 만들어주게 되면 HtmlWebpackPlugin 플러그인이 index.html 을 템플릿으로 해서 html 파일이 생기게 되었고, 그 안에 다음과 같은 js, css 파일들이 번들링된 파일이 들어가 있는 것을 볼 수 있다.

// 템플릿 기준으로 만들어진 html 파일
<html>

<head>
    <link rel='stylesheet' type='text/css' src='./public/style.css'>
</head>

<body>
    <h1>Hellow, Webpack</h1>
    <div id='root'></div>
    
<script src="index_bundle.js"></script><script src="about_bundle.js"></script></body>

</html>

그런데 여전히 번들이 된 여러가지 파일들이 모두 다 들어가있는 것을 볼 수 있다. 원하는 것을 추가하기 위해서는 webpack github 들어가 다음과 같은 표를 보고 적절한 속성을 추가하면 된다. 이 떄는 chunk라는 속성을 사용하자.

// webpack.config.js 파일
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index:'./src/index.js',
    about:"./src/about.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      filename:'./index.html',
			chunk:['index']
    })
  ]
};

chunk에 위 entry 에서의 식별자를 넣어주면 된다. 그렇게 되면 해당 템플릿 기준으로 설정된 chunk 번들링만 링크되어 만들어지게 된다.

만약 두개의 html 을 만들고 싶다. 그러면 webpack.config.js 파일을 다음과 같이 변경해주면 된다.

// webpack.config.js 파일
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index:'./src/index.js',
    about:"./src/about.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      filename:'./index.html',
			chunk:['index']
    }),
		new HtmlWebpackPlugin({
      template:'./src/about.html',
      filename:'./about.html',
			chunk:['about']
    }),			
  ]
};

이렇게 되면 webpack 실행시 html 파일이 2개 생기게 된다. 즉, html 도 최적화 시킬수도 있는 것이다.

이 외에도 여러가지 플러그인이 있으니 필요한 것들 잘 찾아서 사용하면 좋을 것이라 생각된다.

npx webpack 을 계속해서 실행하기 귀찮은 경우가 있을 것이다.

이 경우 다음과 같은 명령어를 사용해보자.

npx webpack —watch

이 명령어를 치게 되면 파일을 변경하게 되면 webpack 이 자동으로 탐지하고 번들링을 해주게 된다.

NPM 패키지 사용

npm을 통해서 설치한 여러가지 작은 부품이될 프로그램들을 애플리케이션으로 가져오는 방법으로써 webpack을 사용하는 방법을 알아보자.

lodash 라는 유명한 라이브러리로 알아보자.

npm install lodash

를 입력하게 되면 해당 라이브러리가 npm 패키지 도구에 의해 다운로드 된다. 그러면 이 라이브러리를 어떻게 webpack 에 삽입할까

다운 받은 후 js 파일을 다음과 같이 바꿔줄 수 있다.

import hello_word from './hello.js'; 
import world_word from './world.js';
import _ from "lodash";
import css from './style.css';
document.querySelector('div#root').innerHTML = hello_word + ' ' + world_word;

이렇게 바꿔주면 lodash 도구를 _ 에 할당해주어 사용할 수 있다.

크게 별거는 없지만 이런식으로 유용한 npm 라이브러리를 다운받아 사용할 수 있다.

Lazy loading

: 너무 큰 번들링 파일인 경우 → 쪼개는 과정이 필요 → webpack 이 제공

Webpack 은 없어도 일은 할 수 있지만 있으면 일을 잘 할 수 있는 정도이다. 허나 모르는 것보다는 한번 맛보는 것이 더 좋은 것이니 프로젝트에 한번 사용해볼 예정이다.

이 3가지에 거의 모든 개념이 들어가있다는 '생코'의 명언

저 위 순서에 따라 어떻게 다양한 형태의 자원들을 webpack 에게 던져줄 것인가? 또한 어떤 방법으로 가공할 것인가? 를 알아보는 게 중요하고, 또한 어떻게 유리한 형태로 내보낼 것인가? 를 알아보는 게 중요하다.

이 흐름을 컨트롤하기 위해서는 webpack 에게 어떻게 해라 시키는 방법이 있는데 이 방법에 대해서 알아보자.

npx webpack —entry ./src/index.js —output ./public/index_bundle.js

위의 명령어는 webpack 에게 entry 파일과 output을 선언하는 명령어였다. 그러나 프로젝트가 커질수록 이 명령어를 일일이 사용하기 번거롭기 때문에 설정파일을 사용하는 것이 좋다.

https://webpack.js.org

위 webpack 홈페이지에 들어가보면 webpack.config.js 파일에 대한 예제들이 나와있는 것을 볼 수 있다.

이 예제를 참고하면서 코딩하면 쉬울 것이다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  }
};

다음과 같이 config 파일을 코딩해주고

npx webpack —config webpack.config.js 을 입력해주면 번들링되어 파일화 된다. (참고로 파일을 webpack.config.js 라는 약속된 이름으로 해주었으면 npx webpack 만 입력해주어도 된다.)

즉 정리하자면 번들링하는 방법은

• 명령어를 통해 엔트리 아웃풋 적어 시키기

• webpack.config.js 에 코드 적어주고 npx webpack 입력

<> 모드 도입

webpack의 운영모드라는 것을 알아보자.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  }
};

위 코드가 작성했었던 webpack.config.js 파일이다.

저 형태로 실행하게 되면 경고 문구가 하나 뜨는 것을 볼 수 있다. mode 설정을 하지 않아서 생기는 문구이다. 즉, 개발용인지 서비스 용인지 webpack에게 알려줘야 한다는 것이다.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  }
};

다음과 같이 mode 한 줄 추가해주면 경고 문구가 뜨지 않는 것을 볼 수 있다.

이 모드를 사용해서 개발용 번들과 배포용 번들을 따로둬서 따로 분리시켜 js 파일을 가질 수도 있다.

또는 하나의 webpack.config.js 하나의 파일 내에서 조건문을 설정해 switching 되게 할 수도 있으니 이 점은 따로 찾아서 처리해보자.

Webpack 을 도입했을 때의 효과는 리팩토링이다.

리팩토링이란 구동되는 방법을 그대로 유지하면서 내부의 코드를 더 효율적으로 바꾸는 행위를 이야기한다.

코드의 전체적인 모습을 그대로 유지하면서 구형 브라우저에서 돌릴 수 있으며 여러가지 파일을 하나로 번들링하는 것을 Webpack 을 통해 해보자.

일단 nodejs 서버 프레임웤으로 해당 페이지를 올려보자.

npm init 을 입력해 해당 프로젝트 폴더를 nodejs 초기 설정을 해주고, npm install -D webpack webpack-cli 저 -D 는 개발을하기 위한 옵션이다.

이렇게 2개를 다운받은 후에 src/index.js 파일을 만들어 html 에서 import 했던 구문들을 옮겨주자

// src/index.js
import hello_word from './src/hello.js'; 
import world_word from './src/world.js';
document.querySelector('div#root').innerHTML = hello_word + ' ' + world_word;

즉, 애플리케이션의 입구 역할의 파일을 index.js 로 설정해준것이다. 이것을 엔트리파일 이라고 한다.

index.js 파일이 hello.js 와 world.js 파일을 사용하고 있다. 그러면 이 의존성을 이용해 index.js 로 번들링 해보자. 이 때의 작업한 결과는 public이라는 폴더 안에다가 넣겠다.

위 과정을 진행하기 위해 webpack 을 실행시켜주자.

npx webpack —entry ./src/index.js -—output ./public/index_bundle.js

위 명령어를 쳐주면 된다. 의미는 src/index.js 의 엔트리 파일과 그 파일이 사용하고 잇는 모든 파일들을 하나로 만들어 public/index_bundle.js 에 가져다 놓아라 라는 의미이다.

그러면 public 폴더 밑에 번들화 된 파일이 만들어져 있을 것이다.

그 후 html 파일에 script src 연결해두면 해당 파일 하나만 커넥션해서 받아도 기존의 기능과 동일하게 돌아간다는 것을 확인할 수 있다.

이렇듯 import 를 webpack을 통해 모든 브라우저가 읽을 수 있게 번들링해줄 수 있게 되어 우리는 편하게 코딩해줄 수 있고, 브라우저도 쉽게 코드를 읽게 된, 서로 윈윈했다고 볼 수 있다.