nodejs는 웹팩을 빌드합니다-프런트엔드 Q&A-php.cn

nodejs는 웹팩을 빌드합니다

王林

풀어 주다： 2023-05-16 20:41:37

원래의

1134명이 탐색했습니다.

프런트엔드 기술의 급속한 발전으로 인해 프론트엔드 개발 도구는 점점 더 복잡해지고 있습니다. 중요한 도구 중 하나는 개발자가 개발 중에 모듈을 보다 쉽게 관리할 수 있게 해주는 효율적인 모듈 패키징 도구인 webpack입니다. 이 기사에서는 nodejs를 사용하여 웹팩을 구축하는 방법에 중점을 둘 것입니다.

1. nodejs와 webpack에 대한 사전 이해

nodejs를 사용하여 webpack을 구축하는 방법을 소개하기 전에 먼저 nodejs와 webpack이 무엇인지 이해하겠습니다.

1.1 nodejs란

Node.js는 Chrome V8 엔진을 기반으로 하는 JavaScript 실행 환경으로 효율적인 이벤트 중심의 비차단 I/O 모델을 사용하여 백엔드 개발을 위한 효율적이고 가벼운 개발을 제공합니다. . 환경. Node.js를 사용하면 JavaScript가 서버 측에서 실행될 수 있으므로 JavaScript 언어를 사용하여 서버 측 애플리케이션을 개발할 수 있습니다.

1.2 webpack이란

Webpack은 최신 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다. Webpack은 애플리케이션을 처리할 때 애플리케이션에 필요한 모든 모듈을 포함하는 종속성 그래프를 내부적으로 구축하고 하나 이상의 번들을 생성합니다. 이러한 번들은 브라우저에 로드할 수 있는 정적 파일입니다.

2. nodejs 설치

nodejs를 사용하여 webpack을 구축하기 전에 시스템에 nodejs를 설치해야 합니다. 공식 웹사이트 https://nodejs.org/en/에서 설치 프로그램을 다운로드할 수 있으며 설치 과정은 매우 간단합니다.

3. npm 초기화

nodejs를 설치한 후 프로젝트에서 npm(Node.js 패키지 관리자)을 사용해야 합니다. 프로젝트 루트 디렉터리에서 다음 명령을 실행하여 npm을 초기화할 수 있습니다:

npm init

로그인 후 복사

이후 npm은 프로젝트 이름, 작성자, 버전 등과 같은 몇 가지 질문을 할 것입니다. 프롬프트에 따라 관련 내용을 입력하기만 하면 됩니다. 완료되면 npm은 프로젝트의 기본 정보와 종속성 정보가 포함된 package.json 파일을 생성합니다.

4. webpack 설치

npm 초기화 후 webpack을 설치해야 합니다. 전역적으로 또는 로컬로 설치할 수 있습니다.

4.1 전역적으로 webpack 설치

다음 명령을 실행하여 전역적으로 webpack을 설치할 수 있습니다:

npm install webpack -g

로그인 후 복사

이렇게 하면 프로젝트의 어느 곳에서나 사용할 수 있는 전역 웹팩이 생성됩니다.

4.2 webpack 부분 설치

부분 설치는 프로젝트의 node_modules 폴더에 webpack을 설치합니다. 다음과 같이 webpack을 설치할 수 있습니다.

프로젝트 루트 디렉터리에서 다음 명령을 실행하여 빈 package.json 파일을 만듭니다.

npm init -y

로그인 후 복사

프로젝트 루트 디렉터리에서 다음 명령을 실행하여 webpack 및 webpack-cli를 설치합니다.

npm install webpack webpack-cli --save-dev

로그인 후 복사

위 명령에서 --save-dev는 개발 종속성(devDependency)에 종속성을 추가한다는 의미입니다.

완료 후 프로젝트의 node_modules 폴더에서 webpack 및 webpack-cli를 찾을 수 있습니다.

5. Webpack 구축

webpack을 설치한 후 webpack 구축을 시작할 수 있습니다. 시작하기 전에 webpack용 항목 파일과 출력 파일을 생성해야 합니다.

5.1 항목 파일 만들기

다른 JavaScript 파일을 가져와야 하는 항목 파일로 프로젝트 루트 디렉터리에 index.js라는 파일을 만들 수 있습니다. 이 예에서는 hello.js라는 간단한 JavaScript 파일을 가져옵니다.

// index.js
import hello from './hello.js';

console.log(hello());

로그인 후 복사

5.2 출력 파일 만들기

출력용 파일을 만들어야 합니다. 프로젝트 루트 디렉토리에 dist 폴더를 생성하고 출력 파일의 이름을 Bundle.js로 지정할 수 있습니다.

// dist/bundle.js

로그인 후 복사

5.3 웹팩 구성 파일 생성

다음으로, 웹팩에 대한 간단한 구성 파일을 생성해야 합니다. 프로젝트 루트 디렉토리에 webpack.config.js라는 파일을 생성하고 다음 내용을 입력합니다.

const path = require('path');

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

로그인 후 복사

위 코드에서는 먼저 Node.js의 Path 모듈을 가져와 경로를 생성한 후 출력 파일을 정의했습니다. JavaScript를 함께 묶을 경로와 파일 이름입니다. 항목은 웹팩 구축이 시작되는 진입점을 지정하며, 이는 애플리케이션의 내부 종속성 그래프를 찾습니다.

6. webpack 실행

이제 webpack 설정이 완료되었으므로 webpack을 실행하여 애플리케이션을 빌드할 수 있습니다.

6.1 전역적으로 webpack 실행

이전에 webpack을 전역적으로 설치한 경우 명령 프롬프트에 다음 명령을 입력할 수 있습니다.

webpack

로그인 후 복사

이 명령을 실행한 후 webpack은 프로젝트 루트 디렉터리에 있는 webpack 구성 파일을 사용하고 항목 파일 index.js를 번들 파일 Bundle.js에 넣고 dist 폴더에 저장합니다.

6.2 로컬에서 webpack 실행

이전에 webpack과 webpack-cli만 설치한 경우 명령 프롬프트에 다음 명령을 입력하여 webpack을 실행할 수 있습니다.

npx webpack

로그인 후 복사

명령을 실행한 후 webpack은 설치 로컬 버전을 실행하고 webpack.config.js 파일의 구성으로 애플리케이션을 빌드합니다.

7. 요약

이 글에서는 주로 nodejs를 사용하여 webpack을 빌드하는 방법을 설명하고, 초기화, 설치, webpack용 입력 파일 및 출력 파일 생성, webpack 구성 파일 생성, webpack 실행을 통해 애플리케이션을 빌드하는 모든 단계를 완료합니다. . webpack을 사용하면 프런트엔드 개발 효율성을 최적화하고 개발 중에 모듈을 보다 쉽게 관리하고 구성할 수 있습니다.

위 내용은 nodejs는 웹팩을 빌드합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!