프런트엔드 엔지니어링: Webpack 구성 가이드

2024-07-12

프런트엔드 엔지니어링: Webpack 구성 가이드

프론트엔드 여러분, 오늘은 사람들이 좋아하고 싫어하는 Webpack에 대해 이야기해보겠습니다. 예, 키보드를 부수고 싶도록 구성된 빌드 도구이지만 키보드 없이는 살 수 없습니다. 걱정하지 마세요. 저를 따라오시면 여러분이 Webpack 초보자에서 구성 마스터로 변할 것이라고 장담합니다!

웹팩이란 무엇입니까?

간단히 말해서 Webpack은 최신 JavaScript 애플리케이션을 위한 정적 모듈 패키징 도구입니다. Webpack은 애플리케이션을 처리할 때 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 종속성 그래프를 내부적으로 구축합니다.

고상한 것 같나요? 실제로 지저분한 코드 파일을 브라우저가 이해하고 실행할 수 있는 파일로 구성하고 패키지하는 것입니다. 집에 있는 모든 옷, 책, 장난감을 정리정돈하는 매우 열심히 일하는 청소부와 같습니다.

기본 구성

먼저 Webpack의 기본 구성을 살펴보겠습니다.만들다webpack.config.js 파일, 이것은 우리의 구성 기반입니다:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
1
2
3
4
5
6
7
8
9

여기,entry 애플리케이션의 진입점을 지정합니다.output Webpack이 생성한 번들을 출력할 위치와 이러한 파일의 이름을 지정하는 방법을 알려줍니다.

로더: Webpack이 다양한 파일을 이해하도록 합니다.

Webpack 자체는 JavaScript 및 JSON 파일만 이해합니다. 로더를 사용하면 Webpack이 다른 유형의 파일을 처리하고 이를 애플리케이션에서 사용할 수 있는 유효한 모듈로 변환할 수 있습니다.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

봤어? 우리는 Webpack에 이렇게 말합니다. "형님, .css 파일을 처리하려면 스타일 로더와 CSS 로더를 사용하고, 이미지를 처리하려면 파일 로더를 사용하세요."

플러그인: Webpack의 마법

플러그인은 Webpack의 중추입니다. 패키징 최적화 및 압축부터 환경 변수 재정의에 이르기까지 다양한 작업을 처리하는 데 사용할 수 있습니다.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '我的超酷网页',
    }),
  ],
};
1
2
3
4
5
6
7
8
9
10
11
12

여기서는 CleanWebpackPlugin을 사용하여 청소합니다. /dist 폴더 및 HtmlWebpackPlugin을 사용하여 HTML 파일을 생성합니다. 이는 Webpack에 두 개의 오른쪽 도우미를 설치하는 것과 같습니다. 하나는 청소를 담당하고 다른 하나는 방 장식을 담당합니다.

모드: 개발 또는 생산?

웹팩이 제공하는 mode 해당 모드에 대해 내장된 최적화를 사용하도록 Webpack에 지시하는 구성 옵션:

module.exports = {
  mode: 'production', // 或者 'development'
  // ...
};
1
2
3
4

'프로덕션'으로 설정하면 Webpack은 JS 코드 압축과 같은 여러 최적화 플러그인을 자동으로 활성화합니다. '개발' 모드는 빠른 빌드와 훌륭한 개발 경험에 중점을 둡니다. 이는 Webpack에 두 개의 모자를 쓰는 것과 같습니다. 하나는 작업용 모자이고 다른 하나는 휴가용 모자입니다.

개발 서버: 핫 업데이트의 스릴

실시간으로 다시 로드할 수 있는 간단한 웹 서버를 제공하려면 webpack-dev-server를 사용하십시오.

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};
1
2
3
4
5
6
7

이 구성 후 코드를 수정하면 브라우저가 자동으로 새로 고쳐집니다. 이는 개발 과정에 터보차저를 장착하는 것과 같습니다!

코드 분리: 계란을 한 바구니에 담지 마세요

코드 분할은 Webpack의 가장 매력적인 기능 중 하나입니다. 이를 통해 코드를 다양한 패키지로 분할한 다음 요청 시 또는 병렬로 로드할 수 있습니다.

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};
1
2
3
4
5
6
7
8

이 구성은 Webpack에 다음과 같이 지시합니다. "공통 코드를 추출하여 별도로 패키지하도록 도와주세요." 이렇게 하면 모듈의 반복 로드를 방지하고 기본 패키지의 크기를 줄일 수 있습니다. 이는 여행 가방을 다시 싸서 자주 사용하는 품목을 가장 쉽게 접근할 수 있는 곳에 두는 것과 같습니다.

나무 흔들기: 과도한 가지와 잎을 털어냅니다.

Tree Shaking은 JavaScript 컨텍스트 내에서 참조되지 않은 코드를 제거하는 것을 설명하는 데 일반적으로 사용되는 용어입니다.

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};
1
2
3
4
5
6

이 구성은 프로덕션 모드에서 Tree Shaking을 자동으로 활성화합니다. 코드를 분석하여 어떤 코드가 사용되지 않는지 알아낸 다음 정원사가 나무를 자르는 것처럼 쓸모 없는 코드를 "가지치기"합니다.

요약하다

좋습니다. 이 모든 작업을 마친 후에는 Webpack 구성을 포괄적으로 이해해야 합니다. 기본 구성부터 고급 기능까지 Webpack의 주요 기능을 다루었습니다. Webpack은 강력한 스위스 군용 칼과 같으며 이를 올바르게 사용하면 개발 효율성과 애플리케이션 성능을 크게 향상시킬 수 있다는 점을 기억하세요.

물론 Webpack의 세계는 그 이상입니다. 지연 로딩, 사전 로딩, 캐싱 등과 같은 더 많은 고급 기능이 여러분을 기다리고 있습니다. 그러나 이러한 기본 사항을 익히고 나면 "나도 Webpack 구성 마스터입니다!"라고 자랑스럽게 말할 수 있습니다.

마지막으로 Webpack의 공식 문서를 자주 확인하는 것을 잊지 마세요. 빠르게 변화하는 프런트엔드 세계에서는 어제의 모범 사례가 오늘은 구식이 될 수 있기 때문입니다. 계속 배우고 탐구하면 프런트엔드 엔지니어링을 향한 길에서 점점 더 나아갈 수 있을 것입니다.

이제 키보드를 들고 Webpack 구성 여정을 시작하세요! 모든 오류는 마스터가 되기 위한 디딤돌임을 기억하십시오. 자, 노동자들을 때려라!

하이마 인터뷰 미니 프로그램

최신 면접 경험 공유, 실제 면접 질문 분석, 풀스택 2000개 이상의 질문 은행, 프론트엔드 및 백엔드 면접 기술 매뉴얼에 대한 자세한 설명이 포함되어 있습니다. 프로그래밍 실력을 키우려면 차분하게 대처하면 됩니다~

포석의. 자, 노동자들을 때려라!

하이마 인터뷰 미니 프로그램

[외부링크 사진 전송중...(img-LBHUGtbe-1720689041341)]

기술나눔