[WEB] 웹팩이란? (WEBPACK)

WEBPACK

웹팩은 모듈 번들러다.

 

---

 

모듈(module)이란?

모듈은 특정 기능을 가지는 작은 코드 단위를 말한다.

 

const sum = (a,b) => a+b;

---

 

번들러(bundler)란?

기술의 발전으로 복잡한 코드도 많이 개발되어 자연스럽게 코드 줄은 기하급수적으로 늘기 시작했다.

코드가 길어짐에 따라 여러 문제가 발생하였다.

 

• 코드 양이 많아 로딩이 느려짐
• 중복되는 코드 이름 (에러 발생)
• 스코프 문제

 

번들러는 여러 개의 파일을 하나로 묶어주는 역할을 수행함으로써 위 문제들을 해결해준다.

여러 개의 번들러가 존재하고 그중 하나가 웹팩(webpack)이다.

 

다시 한번 정리하자면 웹팩은 모듈 번들러다.

 

 

🤨 모듈 번들러인 웹팩은 장점만 존재할까?

웹팩(webpack)의 단점으로는 러닝 커브가 높다.

또한 webpack.config.js 파일을 설정하는 과정이 많이 복잡하여 초기 환성 설정도 어렵다.

 

 

---

 

웹팩의 구성요소

• Entry
• Output
• Loaders
• Plugins
• + (mode)

 

1️⃣ Entry

Entry는 번들링 하고 싶은 모듈들을 묶기 위한 파일의 시작 위치를 나타낸다.

 

module.exports = {
  entry: './path/to/my/entry/file.js', //파일 경로
};

 

 

2️⃣ Output

Output은 번들링이 완료 후의 결과물 설정(경로, 파일 이름 등)을 도와준다. 

 

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

 

 

3️⃣ Loaders

Loaders는 자바스크립트만 알고 있는 웹팩을 위해, 다른 확장자들도 변환시켜주는 기능을 한다.

 

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

 

 

4️⃣ Plugins

Plugins은 번들링이 완료된 결과물에 추가적인 기능을 적용해주는 기능을 한다.

 

const HtmlWebpackPlugin = require('html-webpack-plugin'); // npm을 통해 설치
const webpack = require('webpack'); // 내장 plugin에 접근하는 데 사용

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

 

 

➕ mode란?

모드는 웹팩 4에서 추가된 기능으로 번들링 설정 템플릿이다.

 

• development : 개발용
• production : 배포용
• none : none

 

 

참고사이트

웹팩 공식사이트(en)

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!