앞 게시물에 이어서 웹팩의 나머지 3가지 속성에 대해서 알아보도록 하겠다.

2. Output

output 의 속성 같은 경우에는 웹팩을 돌리고 난 이후 결과물의 파일 경로를 의미한다. 앞에서 공부한 entry 속성과는 다르게 객체 형태로 옵션들을 추가해야 한다는 특징을 가지고 있다.

// webpack.config.js
module.exports = {
  output: {
    filename: 'bundle.js'
  }
}

✌️ Output 속성 옵션 형태

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

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
}

위에서 filename 속성은 웹팩으로 빌드한 파일의 이름을 의미하고, path속성은 해당파일의 경로를 의미한다. 또한 path 속성에서 사용된 .resolve() 는 인자로 넘어온 경로들을 조합하여 유효한 파일 경로를 만들어주는 Node.js API 이다.

output: './dist/bundle.js'

쉽게 말해서 위와 같은 코드로 만들어주는게 resolve의 역할이다.

😍 Output 파일 이름 옵션

앞에서 살펴본 filename 속성은 여러가지 옵션을 가질 수 있다.

module.exports = {
  output: {
    filename: '[name].bundle.js'
  }
};

1. 위와 같이 결과 파일 이름에 entry 속성을 부여할수 있다.

module.exports = {
  output: {
    filename: '[id].bundle.js'
  }
};

2. 결과 파일 이름에 웹팩 모듈 ID를 포함시키는 옵션

module.exports = {
  output: {
    filename: '[name].[hash].bundle.js'
  }
};

3. 매 빌드시 마다 고유 해시 값을 붙이는 옵션

module.exports = {
  output: {
    filename: '[chunkhash].bundle.js'
  }
};

4. 마지막으로 웹팩의 각 모듈 내용을 기준으로 생성된 해시 값을 붙이는 옵션이 있다.

이렇게 생성된 결과 파일의 이름에는 각각

• 엔트리 이름
• 모듈 아이디
• 해시 값

들이 포함되어 있다.

3. Loader

이번에는 로더(Loader)에 대해서 알아보도록 하겠다. 로더는 웹팩에서 자바스크립트 파일이 (HTML, CSS, Images , fonts) 같은 웹자원들을 변환할 수 있도록 도와주는 속성이다.

아래와 같이 로더는 Entry 나 Output 과는 다르게 module 이라는 이름을 사용한다.

// webpack.config.js
module.exports = {
  module: {
    rules: []
  }
}

😳Loader가 필요한 이유는 무엇일까?

웹팩으로 애플리케이션을 빌드할ㄷ 때 만약 아래와 같은 코드가 있다고 해보자

// app.js
import './common.css';

console.log('css loaded');

/* common.css */
p {
  color: blue;
}


// webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  }
}

위 파일을 웹팩으로 빌드하게 되면 app.js 파일에서 임포트한 common.css파일을 해헉하기 위해 적절한 로더를 추가 해달라는 에러가 발생할 것이다.

😎CSS Loader 적용하기

위와 같은 오류가 나면 해당 폴더 아래의 NPM 명령어로 CSS 로더를 설치하고 웹팩 설정파일 설정을 바꿔주면 에러를 해결할 수 있을것이다.

npm i css-loader -D

// webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-loader']
      }
    ]
  }
}

위의 module 쪽 코드를 보면 rules 배열에 객체 한 쌍을 추가했다. 그리고 그 객체에 2가지 속성이 들어가 있는데 그 둘의 역할을 각가 아래와 같다.

• test : 로더를 적용할 파일 유형(일반적으로 정규 표현식 사용)
• use : 해당 파일에 적용할 로더의 이름

정리하자면 위 코드는 해당 프로젝트의 모든 CSS 파일에 대해서 CSS 로더를 적용하겠다는 의미이다.

❤️그렇다면..자주 사용되는 Loader 와 적용 순서에 대해서 알아보자!

자주 사용되는 로더 종류

• Babel Loader
• Sass Loader
• File Loader
• Vue Loader
• TS Loader

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

로더를 여러개 사용하게 되면 위와 같이 rules 배열에 로더 옵션을 객체형태로 추가해주면 된다.

로더 적용 순서

로더는 기본적으로 오른쪽에서 왼쪽 순으로 적용된다.
CSS의 확장 문접인 SCSS 파일에 로더를 적용해보겠다.

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

위 코드는 sccs 파일에 대해 먼저 Sass 로더로 전처리(scss파일을 css파일로 변환)를 한 다음 웹팩에서 CSS파일을 인식할 수 있게 CSS로더를 적용하는 코드이다.

만약 웹팩으로 빌드한 자원으로 실행했을때 해당 CSS 파일이 웹 애플리케이션에 인라인 스타일태그로 추가되는 것을 원한다면 아래와 같이 style 로더도 추가하여 쓸 수 있다.

{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}

위와 같이 배열 형태로 입력하는 대신 옵션을 포함한 형태로도 나타낼수 있다.

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

4. Plugin

웹팩의 마지막 속성인 플러그인에 대해서 공부해보도록 하겠다. 플러그인은 웹팩의 기본적인 동작에 추가적인 기능을 제공해주는 속성이다. 로더랑 비교하면 로더는 파일을 해석하고 변환하는 과정인 반면 플러그인은 해당 결과물을의 형태를 바꾸는 역할이라고 보면 된다.

Plugin은 아래와 같이 선언하여 사용된다.

// webpack.config.js
module.exports = {
plugins: []
}

플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있다.

// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.ProgressPlugin()
  ]
}

• HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
• ProgressPlugin : 웹팩의 빌드 진행율을 표시해주는 플러그인

💕자주 사용되는 플러그인에 대해서 알아보자..

• split-chunks-plugin
• clean-webpack-plugin
• image-webpack-loader
• webpack-bundle-analyzer-plugin

🧐마지막으로 웹팩의 4가지 속성을 정리해보자

1. Entry: 속성은 웹팩을 실행할 대상 파일 진입점
2. Output: 속성은 웹팩의 결과물에 대한 정보를 입력하는 속성, 일반적으로 filename 과 path를 정의
3. Loader: 속성은 CSS, 이미지 와 같은 비 자바스크립트 파일을 웹팩이 인식할 수 있도록 추가해주는 속성.
   오른쪽 --> 왼쪽 순으로 적용된다.
4. Plugin: 속성은 웹팩으로 변환한 파일에 추가적인 기능을 더하고 싶을떄 사용된다. 웹팩 변환 과정 전반에 대한 제어권 갖음.