웹팩 예제 튜토리얼 공유

Webpack은 프런트엔드 리소스 로딩/패키징 도구입니다. 모듈 종속성을 기반으로 정적 분석을 수행한 다음 지정된 규칙에 따라 이러한 모듈에 해당하는 정적 리소스를 생성합니다.

Webpack 설치

Webpack을 설치하기 전에 로컬 환경이 node.js를 지원해야 합니다.

npm의 느린 설치 속도로 인해 이 튜토리얼에서는 Taobao의 이미지와 해당 명령 cnpm을 사용합니다.

먼저 webpack을 전역적으로 설치한 다음 npm이 프로젝트를 초기화하고 webpack 개발 도구를 로컬에 설치합니다.

$ npm install webpack -g

npm init (项目名称)

$ npm install webpack-dev-server --save-dev

Create it in 프로젝트 디렉토리 app 폴더를 열고 index.js 파일을 생성하고 다음 코드를 작성하세요

console.log('hello world');

프로젝트 폴더에서 명령줄을 열고 다음 명령을 입력하세요

webpack app/index.js build/index.js

다음 코드는 성공했습니다.

build/index.js 파일의 코드를 살펴보세요.

행 73이 app/index.js 파일의 코드라는 것을 알 수 있습니다.

우리는 다른 날, 오늘 특정 소스 코드를 분석하는 것이 우리의 주요 목적은 경험입니다.

코드를 하나씩 입력하는 것은 너무 비효율적입니다. webpack.config.js 파일을 통해 더 고급 기능을 완성할 수 있습니다.

위 내용은 웹팩 예제 튜토리얼 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!