webpack 개념

IT 일반

by 폴리프레임 2024. 5. 30. 11:14

Webpack은 대표적인 자바스크립트 번들러 중 하나입니다. 번들러(Bundler)는 여러 개의 파일을 로직에 맞추어 하나의 파일로 합치는 도구입니다. 번들러는 다음과 같은 이유로 사용합니다.

모듈화: 여러 개의 파일로 나뉘어져 있는 자바스크립트 코드를 실행 로직에 맞춰 하나의 파일로 합쳐 단순화 합니다.
성능 최적화: 파일이 하나로 단순화 되었으니 네트워크 요청 수가 줄어 페이지 로딩 속도를 향상시킵니다.
코드 관리: 코드 스플리팅과 같은 기술을 통해 큰 파일을 여러 개의 작은 파일로 나누어 관리 할 수 있습니다.
호환성: 최신 자바스크립트 기능을 구형 브라우저에서도 사용할 수 있도록 변환해 줍니다.

Webpack 의 기본 용어

Entry

//webpack.config.js

module.exports = {
  entry: './src/index.js' // 디폴트
};

진입점은 기본적으로 ./src/index.js이지만 webpack 구성에서 진입점을 설정하여 다른 진입점(또는 여러 진입점)을 지정할 수 있습니다.

Output

// webpack.config.js

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

출력은 webpack이 생성한 번들을 내보낼 위치와 이러한 파일의 이름을 지정하는 방법을 알려줍니다. 기본 출력 파일의 경우 기본값은 ./dist/bundle.js이고 생성된 다른 파일의 경우 ./dist 폴더입니다.

Loaders

// webpack.config.js

module.exports = {
  entry: './src/index.js', // 디폴트
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js' // 디폴트
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

Loader 는 두개의 중요한 속성 ( test, use) 을 갖고 있습니다. test는 어느 파일들을 변형 할 지를 지정하고, use는 변형 할때 어느 loader를 사용 할지를 정의 합니다. 주의 할 점은 /\.txt$/ 에 따옴표가 없습니다( .txt 로 끝나는 모든파일 - RegEx )

Plugins

// webpack.config.js

module.exports = {
  entry: './src/index.js', // 디폴트
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js' // 디폴트
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

loader는 특정 유형의 모듈을 변환하는 데 사용되지만, plugins 을 활용하여 번들 최적화, assets 관리 및 환경 변수 주입과 같은 광범위한 작업을 수행할 수 있습니다.

Mode

//webpack.config.js

module.exports = {
  entry: './src/index.js', // 디폴트
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js' // 디폴트
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ],
   mode: 'production'
};

mode 는 development, production, none 으로 설정하며, 기본값은 production입니다.

사용법

Step 1: 프로젝트 초기화

mkdir project
cd project
npm init -y

Step 2: Webpack 및 필요 모듈 설치

npm install webpack webpack-cli --save-dev
npm install @babel/core babel-loader @babel/preset-env --save-dev

Step 3: Webpack 설정 파일 생성

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  mode: 'development',
};

Step 4: Babel 설정 파일 생성

//.babelrc

{
  "presets": ["@babel/preset-env"]
}

Step 5: 자바스크립트 파일 작성

// src/index.js
const greet = () => {
  console.log('Hello, Webpack!');
};

greet();

모듈로 연결된 많은 파일이 있어도 관계없음

Step 6: HTML 파일 작성

// src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Example</title>
</head>
<body>
  <script src="index.js"></script>
</body>
</html>

webpack 실행전에 index.html과 index.js 의 연결을 확인하고, 실행해 본다.

Step 7: Webpack 실행

// package.json

"scripts": {
  "build": "webpack"
}

package.json에 위의 스크립트 파일을 넣고, 터미널에서 npm run buld 을 실행하면, dist/bundle.js 파일이 생긴다. 이 것을 실험해 보려면, src/index.html 파일을 dist폴더로 옮기고, <script />을 <script src="bundle.js"></script> 로 고치고 실행한다.

터미널 창에서 이렇게 결과가 보인다면 webpack 설치가 성공한 것입니다.

> npm run build
> webpack@1.0.0 build
> webpack
asset bundle.js 1.52 KiB [emitted] (name: main)
./src/index.js 324 bytes [built] [code generated]
webpack 5.91.0 compiled successfully in 11195 ms

Step 8. css file을 main.js로 불러들이려면, 다음을 설치한다.

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

//webpack.config.js 에 추가

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

// src/index.js

import _ from 'lodash';
import './style.css';

const greet = () => {
  const elementDiv = document.createElement("div");
  element.innerHTML = _.join(["Hello","World"], " ");
  elementDiv.classList.add('hello')
  
  console.log('Hello, Webpack!');
  
  retun elementDiv;
};

document.body.appendChild(greet());

// src/style.css

.hello {
   color: red;
 }

// package.json 에서 "script" 확인

"scripts": {
    "build": "webpack",
    ...
  },

터미날에서 "npm run build" 하면, 다음 처럼 성공을 확인 할 수 있음

asset bundle.js 73.4 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1.02 KiB 6 modules

.....

webpack 5.91.0 compiled successfully in 1630 ms

- 단일화 된 bundle.js와 index.html 만 서버에 올리면 됨.

- local에서 확인하려면, index.html 을 Live Server 로 열어 볼 수도 있음.

저작자표시 비영리 변경금지 (새창열림)

'IT 일반' 카테고리의 다른 글

.json 과 .json5 의 차이점 (1)	2024.06.03
parcel - webapp 설치 (0)	2024.05.30
Java를 이용한 웹 (0)	2024.05.18
파이썬의 웹 (0)	2024.05.18
프록시 서버 - Forward Proxy, Reverse Proxy (0)	2024.05.18

폴리프레임

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

Webpack 의 기본 용어

사용법

'IT 일반' 카테고리의 다른 글

관련글 더보기

추가 정보

인기글

최신글

티스토리툴바