웹 팩 입문 - 간이 버 전 vue - cli 구축

앞에서 말 했 듯 이 (면접 에서 웹 팩 을 소개 하 라 고 하면 이렇게 대답 할 수 있 습 니 다) 간단하게 말 하면 웹 팩 의 가장 핵심 적 인 기능 은 템 플 릿 간 의 의존 을 해결 하고 각 모듈 을 특정한 규칙 과 순서에 따라 구성 하여 JS 파일 (예 를 들 어 bundle. js) 로 통합 하 는 것 입 니 다.이 전체 과정 은 흔히 모듈 포장 이 라 고 불 린 다.다시 말 하면 웹 팩 은 명령 집합 설정 문서 이 고 설 정 된 명령 을 통 해 드라이버 가 해 야 할 일 을 하 는 것 이다.이 동작 들 은 모두 자신 이 쓴 규칙 을 통 해 컴 파일 되 고 자바 스 크 립 트 의 도입 import 문법 을 통 해 웹 팩 에 게 무엇 을 컴 파일 해 야 하 는 지 알 게 한다 (예 를 들 어 Pug, Sass 등).그래서 우 리 는 항상 하나의 입구 파일 (예 를 들 어 index.js 을 Preprocess 에 주입 하여 Preprocess 가 이 입구 파일 의 JavaScript 를 통 해 Webpack 에 관련 설정 명령 에 따라 컴 파일 한 다음 에 출구 파일 에 포장 할 수 있 도록 합 니 다. 예 를 들 어 bundles.js.
      vue - cli 1 / 2 로 vue 프로젝트 를 만 들 때 웹 팩 설정 에 관 한 파일 을 많이 볼 수 있 습 니 다.번 거 로 운 프로필 이 어떤 역할 을 하 는 지 알 필요 가 없습니다. 콘 솔 에 입력 npm run dev 하면 프로젝트 가 자동 으로 시작 되 고 업무 코드 를 즐겁게 쓸 수 있 습 니 다.
      비록 vue - cli 가 우 리 를 도와 모든 것 을 해 주 었 지만, 우 리 는 웹 팩 을 배우 지 않 아 도 됩 니까?NoNoNo... 현대 전단 엔지니어 에 게 필수 적 인 기능 은 모듈 화 된 포장 프로젝트 구축 입 니 다. 채용 사이트 의 전단 JD 에 가 보 는 것 을 믿 지 않 습 니 다.쓸데없는 소리 하지 말고 웹 팩 으로 간단 한 vue - cli 를 구축 합 시다.
STEP 1: NodeJS 설치 (webpack NodeJS 기반)
다운로드 주소:http://nodejs.cn/download/바보 식 설치, 다음 단계 까지 ok.설치 가 완료 되면 콘 솔 에 입력 node -v 하여 성공 여 부 를 확인 합 니 다.
NodeJS 는 브 라 우 저 처럼 자 바스 크 립 트 의 실행 환경 입 니 다.설치 후 node 명령 을 통 해 자바 스 크 립 트 코드 를 실행 할 수 있 습 니 다. 예 를 들 어 node a.jsnpm (node package manage of JavaScript) 역할: Node. js 다운로드 후 npm 를 가 져 옵 니 다. 빠 른 레이 다운로드 자원 과 유사 하여 프로젝트 에 필요 한 의존 모듈 / 패 키 지 를 다운로드 할 수 있 습 니 다.

NPM 서버 에서 다른 사람 이 작성 한 제3자 가방 을 다운로드 하여 로 컬 로 사용 할 수 있 습 니 다.

NPM 서버 에서 다른 사람 이 작성 한 명령 행 프로그램 을 다운로드 하고 설치 하여 로 컬 에서 사용 할 수 있 습 니 다.

사용자 가 작성 한 가방 이나 명령 행 프로그램 을 NPM 서버 에 업로드 하여 다른 사람 이 사용 할 수 있 도록 합 니 다.

npm 는 외국 것 으로 느 릴 수 있 습 니 다. cnpm 설치 권장, 설치 방법: npm install - g cnpm -- registry =https://registry.npm.taobao.org
두 번 째 단계: npm init 생 성 패키지. json 초기 화

먼저 빈 프로젝트 폴 더 를 만 듭 니 다.

폴 더 에 들 어가 면 shift+ [명령 창 열기 (W)],

클릭 하여 cmd 콘 솔 에 들 어가 면 명령 경 로 는 현재 폴 더 디 렉 터 리 입 니 다.

그리고 입력 npm init -y 을 하고 차 로 돌아 가면 루트 디 렉 터 리 에 package. json 을 만 듭 니 다.

package. json 은 전체 프로젝트 의 의존 모듈 / 패 키 지 를 저장 하 는 데 사 용 됩 니 다. 전체 프로젝트 를 다른 곳 으로 옮 겨 사용 할 때 프로젝트 가 실 행 될 때 package. json 의 의존 매개 변수 에 따라 필요 한 모듈 / 패 키 지 를 자동 으로 다운로드 합 니 다.
STEP 3: 웹 팩 설치
wepack 3, webpack 4 의 vue - cli 호 환 이 좋 지 않 습 니 다.
명령: npm install [email protected] --save-dev웹 팩 이 로 컬 에서 사용 할 수 있 는 지 테스트 합 니 다. webpack -v k 가 잘못된 명령 이 나타 나 면 전역 에 웹 팩 을 설치 합 니 다. webpac설치 에 성공 하면 npm install [email protected] -g 명령 으로 놀 수 있 습 니 다.
웹 팩 은 모듈 포장 기 라 고 볼 수 있 습 니 다. 모든 자원 을 모듈 로 할 수 있 고 webpack 처 리 를 거 쳐 마지막 으로 파일 로 포장 할 수 있 습 니 다.
Grunt 와 Gulp 의 작업 방식 은 설정 파일 에서 일부 파일 에 대해 유사 한 컴 파일, 조합, 압축 등 작업 의 구체 적 인 절 차 를 가리 키 며 도 구 를 사용 하면 자동 으로 이 작업 을 수행 할 수 있 습 니 다.웹 팩 핵심 모듈:

entry: 입구 파일, 여러 개 가능

output: 출구 파일, 하나만

loader: 웹 팩 이 js 이외 의 파일 을 처리 하 는 데 도움 을 줍 니 다

plugins: 웹 팩 의 능력 을 강화 하고 더 많은 일 을 합 니 다

STEP 4: 웹 팩 패키지 모듈
많은 파일 형식, 예 를 들 어 vue, css, img, 글꼴.예 를 들 어 css 를 js 파일 에 포장 하려 면 css 로 더 를 설치 해 야 합 니 다. 설치 명령: loader npm install --save-dev style-loader css-loader 과 css-loader, 두 사람 이 처리 하 는 작업 이 다 릅 니 다 style-loader. 유사 한 css-loader 방법 으로 @import url(...) 기능 require() 을 실현 할 수 있 도록 모든 계산 후의 스타일 style-loader 을 페이지 에 추가 할 수 있 습 니 다.웹 팩 에 스타일 시트 를 끼 워 넣 고 포장 한 JS 파일 에 명령 행 을 묶 을 수 있 도록 합 니 다 (추천 하지 않 음).

webpack {entry file} {destination for bundled file} //  webpack ./js/main.js ./dist/bundle.js     dist  

이러한 포장 방식 은 js 파일 에 css 파일 을 도입 할 때