webpack은 node.js를 기반으로 합니까?-JS 튜토리얼-php.cn

webpack은 node.js를 기반으로 합니까?

青灯夜游

풀어 주다： 2022-07-12 18:57:20

원래의

2970명이 탐색했습니다.

webpack은 node.js를 기반으로 합니다. Webpack은 최신 JavaScript 애플리케이션을 위한 정적 모듈 패키징 도구입니다. node.js를 기반으로 개발되었으며, 사용 시 node.js 구성 요소 지원이 필요하며 구문은 "cnpm install webpack"입니다. -g".

webpack은 node.js를 기반으로 합니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, nodejs 버전 16, DELL G3 컴퓨터.

Webpack은 입구, 출구, 로더 및 플러그인이 포함된 코드 컴파일 도구입니다. webpack은 최신 JavaScript 애플리케이션을 위한 정적 모듈 번들링 도구입니다. 모듈 종속성을 기반으로 정적 분석을 수행한 다음 지정된 규칙에 따라 이러한 모듈에 해당하는 정적 리소스를 생성합니다.

webpack은 애플리케이션을 처리할 때 프로젝트에 필요한 각 모듈에 매핑되는 종속성 그래프를 내부적으로 구축하고 하나 이상의 번들을 생성합니다.

Webpack은 node.js를 기반으로 개발된 프런트엔드 패키징 도구입니다. 사용 시 node.js 구성 요소 지원이 필요합니다.

Webpack 설치

① Webpack을 실행하려면 Node.js가 필요하므로 먼저 Node.js를 설치해야 합니다.

설치가 완료된 후 명령줄 창에 다음 두 줄의 명령을 입력하면 버전 번호가 나타나면 설치가 성공한 것입니다.

$ node -v$ npm -v

로그인 후 복사

② 그러면 npm(Node.js 기반의 패키지 관리 도구)을 통해 Webpack을 설치하시면 됩니다.

npm 소스가 해외에 있기 때문에 설치 속도가 느릴 수 있습니다. Taobao의 npm 미러 cnpm을 사용하는 것이 좋습니다. 하지만 한 가지 주의할 점은 cnpm의 일부 패키지가 다르다는 것입니다(일반적으로 사용에 영향을 주지 않습니다)

다음 코드 줄을 통해 cnpm 구성을 완료할 수 있습니다

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

로그인 후 복사

cnpm을 사용하여 webpack을 설치하세요.

cnpm install webpack -g

로그인 후 복사

프로젝트 만들기

다음으로 앱 디렉터리를 만듭니다.

mkdir app

로그인 후 복사

앱 디렉터리에 runoob1.js 파일을 추가합니다. 코드는 다음과 같습니다.

app/runoob1.js 파일

document.write("It works.");

로그인 후 복사

Add app 디렉토리의 index.html 파일, 코드는 다음과 같습니다:

app/index.html 파일

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

로그인 후 복사

다음으로 webpack 명령을 사용하여 패키지합니다:

webpack runoob1.js bundle.js

로그인 후 복사

위 명령을 실행하면 runoob1.js 파일이 컴파일됩니다. 성공 후 출력 정보는 다음과 같습니다.

Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./runoob1.js 29 bytes {0} [built]

로그인 후 복사

브라우저에서 index.html을 열면 출력 결과는 다음과 같습니다.

webpack은 node.js를 기반으로 합니까?