Home 웹팩(Webpack)
Post
Cancel

웹팩(Webpack)

웹팩이란?


출처

  • 모듈로 연결된 여러 개의 자바스크립트 파일을 하나로 만들어주는 역할을 한다.
  • 하나로 합쳐진 파일을 번들이라고 하는데 웹팩은 번들을 만들어주는 번들러이다.

웹팩 설치

  • webpack & webpack-cli 을 설치한다.
1
npm install -D webpack webpack-cli
  • 웹팩 설치 후 프로젝트 루트 폴더에 webpack.config.js 파일을 만든다.

웹팩 설정

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
const path = require('path');

module.exports = {
  mode: 'development',
  entry: ./src/index.js,
  output: {
    path: path.resolve(./dist),
    filename: bundle.js 
  },
  ...
}
  • 웹팩 필수 옵션 조건
    • --mode : development, production, none 웹팩 빌드 옵션으로 환경에 따라 설정해 준다.
    • --entry: 모듈의 시작점을 엔트리 또는 엔트리 포인트라고 한다. 엔트리 포인트부터 하나씩 모듈을 엮어 js 파일로 만든다. (예: src/index.js)
    • --output : 모듈이 시작되는 부분부터 모두 합쳐준 결과물을 저장하는 곳
      • path: 합쳐진 결과물 파일을 저장하는 폴더 경로
      • filename: 합쳐진 결과물 파일 이름이다. 보통 “bundle.js” 또는 “[name].js”로 많이 사용한다.

로더

로더는 모든 파일을 자바스크립트 모듈처럼 만들어준다. 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지 및 css 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다.

  • 로더는 modules 객체의 rules 배열에 추가하여 설정할 수 있다.
  • rules 배열에는 객체를 넣는데 test에는 로더가 처리해야 할 파일들의 패턴을 정규 표현식으로 작성하고 use에는 사용할 로더를 작성한다.

css-loader & style-loader

css-loader는 css 파일을 모듈처럼 사용할 수 있게 해주는 로더이고 style-loader는 css-loader가 처리해 준 모듈처럼 사용할 수 있게 해주는 로더이다. js 파일의 css 문자열을 브라우저에 html에 주입시켜 브라우저에 보일 수 있도록 처리해준다.

1
npm install css-loader style-loader

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const path = require('path');

module.exports = {
  mode: "development",
  entry: "./src/app.js",
  output: {
    path: path.resolve('./build'),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,  // css로 끝나는 모든 파일
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}
  • css로 끝나는 모든 파일마다 작성한 로더가 실행된다.
  • 위와 같이 로더는 한 파일에 여러 개가 실행될 때 배열의 뒤에서부터 앞으로 실행된다. (예: css-loader → style-loader 순으로 실행된다.)

file-loader

이미지 파일을 모듈로 사용할 수 있도록 변환하는 역할을 하는 로더이다.

1
npm i file-loader

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const path = require('path');

module.exports = {
  mode: "development",
  entry: "./src/app.js",
  output: {
    path: path.resolve('./build'),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,  //css로 끝나는 모든 파일
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|svg|gif)$/,  //png,jpg,svg,gif로 끝나는 모든 파일
        loader: 'file-loader',
        options: {
          publicPath: './dist/',
          name: '[name].[ext]?[hash]' // [원본 파일명].[확장자명].[해쉬값]
        }
      },
    ]
  }
}
  • 빌드된 이미지 경로를 사용할 수 있도록 publicPath 경로를 설정해 준다.
  • option name에 [원본 파일명].[확장자명].[해쉬값(캐시와 관련된 문제를 해결)]를 설정한다.

더 많은 로더 보기

플러그인


로더는 모듈로 연결되어 있는 파일마다 변환하는 과정에서 처리한다면 플러그인은 아웃풋으로 번들링 된 결과물을 처리해 준다.

BannerPlugin

child_process 설치하면 터미널 명령어를 실행할 수 있다. childProcess.execSync에 문자열을 넣어 터미널 명령어를 사용할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const path = require('path');
const webpack = require('webpack');
const childProcess = require('child_process'); // 터미널 명령어를 실행할 수 있다.(node_module)

module.exports = {
  mode: "development",
  entry: "./src/app.js",
  output: {
    path: path.resolve('./build'),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,  //css로 끝나는 모든 파일
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|svg|gif)$/,  //png,jpg,svg,gif로 끝나는 모든 파일
        loader: 'file-loader',
        options: {
          publicPath: './dist/',
          name: '[name].[ext]?[hash]' // [원본 파일명].[확장자명].[해쉬값]
        }
      },
    ]
  },
  plugins: [
    new webpack.BannerPlugin({banner: `
      Build Date: ${new Date().toLocaleString()}
      Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}
      Author: ${childProcess.execSync('git config user.name')}
    `})
  ]
}

CleanWebpackPlugin

webpack으로 빌드를 할 때마다 자동으로 이전에 빌드 된 아웃풋 폴더를 삭제하고 다시 빌드 할 수 있는 플러그인이다.

1
npm i clean-webpack-plugin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
const path = require('path');
const webpack = require('webpack');
const childProcess = require('child_process'); // 터미널 명령어를 실행할 수 있다.(node_module)
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: "development",
  entry: "./src/app.js",
  output: {
    path: path.resolve('./build'),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,  //css로 끝나는 모든 파일
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|svg|gif)$/,  //png,jpg,svg,gif로 끝나는 모든 파일
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]' // [원본 파일명].[확장자명].[해쉬값]
        }
      },
    ]
  },
  plugins: [
    ...
    new CleanWebpackPlugin(),
    ...

  ]
}

더 많은 플러그인 보기

This post is licensed under CC BY 4.0 by the author.