close

Webpack 초보자를 위한 가이드

Webpack 현대 웹 개발에서 매우 유용한 도구로 프로젝트의 리소스 관리 및 최적화를 지원합니다. 초보자를 위한 사용 방법에 대한 기본 가이드는 다음과 같습니다 Webpack.

설치하다 Webpack

먼저 Node.js를 아직 설치하지 않았다면 설치합니다. 그런 다음 프로젝트의 디렉터리를 만들고 해당 디렉터리에서 터미널/명령 프롬프트 창을 엽니다. 다음 명령을 실행하여 Webpack webpack-cli(Webpack의 명령줄 인터페이스)를 설치합니다.

npm install webpack webpack-cli --save-dev

Webpack 구성 만들기

webpack.config.js 프로젝트 디렉터리의 루트에 이름이 지정된 파일을 만듭니다. 여기에서 를 구성합니다 Webpack.

const path = require('path');  
  
module.exports = {  
  entry: './src/index.js', // Entry point of your application  
  output: {  
    filename: 'bundle.js', // Output file name  
    path: path.resolve(__dirname, 'dist') // Output directory  
  }  
};

폴더 및 파일 생성

루트 디렉터리에 폴더를 만들고 그 안에 응용 프로그램의 기본 파일 역할을 하는 src 파일을 만듭니다. index.js

달리다 Webpack

a를 열고 Terminal 다음 명령을 실행하여 다음을 사용하여 소스 코드를 컴파일합니다 Webpack.

npx webpack

이 명령을 실행한 후 Webpack 구성에 따라 파일을 컴파일 하고 디렉터리 에 index.js 이름이 지정된 출력 파일을 만듭니다. bundle.js dist

HTML에서 사용

dist 디렉터리 또는 원하는 위치 에 HTML 파일을 만들고 bundle.js 파일에 연결합니다.

<!DOCTYPE html>  
<html>  
<head>  
  <title>Webpack App</title>  
</head>  
<body>  
  <script src="bundle.js"></script>  
</body>  
</html>

애플리케이션 실행

브라우저에서 HTML 파일을 열고 응용 프로그램이 작동하는지 확인하십시오.

이것은 단지 기본적인 가이드일 뿐입니다. Webpack CSS 처리, 모듈 관리, 로더 및 플러그인 사용, 소스 코드 최적화 등과 같은 많은 강력한 기능이 있습니다. Webpack 이 도구의 기능을 최대한 활용하려면 공식 문서를 살펴보십시오 .