webpack은 node.js를 기반으로 합니다. Webpack은 최신 JavaScript 애플리케이션을 위한 정적 모듈 패키징 도구입니다. node.js를 기반으로 개발되었으며, 사용 시 node.js 구성 요소 지원이 필요하며 구문은 "cnpm install webpack"입니다. -g".
이 튜토리얼의 운영 환경: 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의 일부 패키지가 다르다는 것입니다(일반적으로 사용에 영향을 주지 않습니다).
$ npm install -g cnpm --registry=https
코드 줄을 통해 cnpm 구성을 완료할 수 있습니다
.//registry .npm.taobao.org
cnpm을 사용하여 webpack 설치:
cnpm install webpack -g
프로젝트 만들기
다음으로 앱 디렉터리를 만듭니다.
mkdir app
app 디렉터리에 runoob1.js 파일을 추가합니다. 코드는 다음과 같습니다.
app/runoob1.js file
document.write ("작동합니다."); app 디렉토리에 index.html 파일을 추가합니다. 코드는 다음과 같습니다:
app/index.html file
<html>
<머리>
<meta charset="utf-8">
</head>
<본문>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html> 다음으로 webpack 명령을 사용하여
webpack runoob1.js Bundle.js를패키징합니다. 위 명령을
실행
하면 runoob1.js 파일이 컴파일되고 Bundle.js 파일이 생성됩니다. 성공 후 출력 정보는 다음과 같습니다.
: a41c6217554e666594cb
버전: 웹팩 1.12.13
시간: 50ms
자산 크기 청크 청크 이름
Bundle.js 1.42 kB 0 [방출됨] 메인
[0] ./runoob1.js 29바이트 {0} [build] 브라우저에서 index.html을 열면 출력 결과는 다음과 같습니다.
