1. 공식 설명
본질적으로 webpack은 현재 JavaScript 애플리케이션을 위한 정적 모듈식 패키징 도구입니다. (이 문장은 모듈 과 패키징 두 가지로 요약됩니다.)
모듈 과 패키징 의 개념에 대해 이야기해 봅시다!
2. 프런트엔드 모듈화
3. 포장을 이해하는 방법은 무엇입니까?
webpack과 grunt/gulp의 비교
grunt/gulp의 핵심은 Task입니다.
1. 일련의 작업을 구성 하고 작업에서 처리할 트랜잭션을 정의할 수 있습니다(예: ES6, TS 변환, 이미지 압축, scss에서 CSS로 변환).
2. 그런 다음 grunt/gulp가 이러한 작업을 순서대로 실행 하고 전체 프로세스를 자동화하여
gulp 작업을 확인합니다.
1. 다음 작업은 src 아래의 모든 js 파일을 ES5 구문으로 변환하는 작업입니다.
2. 마지막으로 dist 폴더에 출력합니다. 
언제 grunt/gulp를 사용하나요?
1. 프로젝트 모듈 종속성은 매우 간단하며 모듈화 개념도 사용되지 않습니다.
2. 간단한 병합 및 압축을 위해 grunt/gulp를 사용하세요.
3. 전체 프로젝트가 모듈식 관리를 사용하고 상호의존성이 매우 강한 경우 webpack을 사용할 수 있습니다.
grunt/gulp와 webpack의 차이점은 무엇입니까?
1. grunt/gulp는 프런트 엔드 프로세스의 자동화에 더 중점을 두고 있으며 모듈화가 핵심이 아닙니다.
2. Webpack은 모듈 식 개발 관리에 더 중점을 두고 있으며, 파일 압축, 병합, 전처리 등의 기능이 포함되어 있습니다.
( wepack은 정상적인 작동을 위해 노드 환경에 의존해야 하며, 노드 환경은 다음과 같습니다. 정상적인 실행을 위해서는 npm 도구를 사용하여 node에서 다양한 종속 패키지를 관리해야 합니다 .
1. 파일 및 폴더 분석
다음은 mathUtils.js 파일과 main.js 파일의 코드입니다. (CommonJS 모듈화 사양, CommonJS는 모듈화의 표준, nodejs는 CommodJS(모듈화) 구현)
2. 명령
webpack ./src/main.js ./dist/bundle.js (main.js 파일을 Bundle.js 파일로 패키징)
설명: 같은 방식으로 ES6 모듈 사양을 사용할 수도 있습니다.
3. webpack.config.js 파일을 생성하여 패키징 명령을 단순화합니다
(패키징 명령을 패키징 항목 및 종료 에 매핑).
이 파일의 코드는 다음과 같습니다.
항목: 패키지된 항목
출력의 경우: Node.js 구문을 사용하여 모듈을 가져올 수 있도록 패키지된 종료 출력에서 경로를 동적으로 가져와야 합니다
설명: 노드를 사용하려면 package.json 파일을 사용해야 합니다.
npm install [email protected] --save-dev 를 실행한 후 종속성은 다음과 같이 추가됩니다.
4. webpack 명령을 npm run에 매핑
webpack을 입구 및 출구 에 매핑하는 것 외에도 일부 작업에 대해 webpack 명령을 npm run 에 매핑할 수도 있습니다(패키지의 **"script"** 스크립트 태그에서 수정해야 함). JSON). .
1. 로더란 무엇인가요?
이제 webpack이 어떤 용도로 사용되는지 생각해 보겠습니다.
2. 로더 사용 프로세스
1)
CSS 파일 처리를 위한 준비 작업:
1. src 디렉터리에 CSS 파일을 생성합니다. , 그 안에 Normal.css 파일을 생성합니다
. 2. 파일의 디렉터리 구조를 재구성하고 흩어져 있는 js 파일들을 js 폴더에 넣습니다.
3. Normal.css의 코드는 매우 간단합니다. 즉, 본문을 빨간색으로 설정합니다. 
4. 하지만 Normal.css의 스타일은 참조되지 않았기 때문에 지금은 적용되지 않으며, 항목이 하나뿐이므로 webpack은 이를 찾을 수 없으며, webpack은 항목에서 시작하여 다른 종속 파일을 검색합니다.
5. 이때 엔트리 파일인 main.js에서 참조해야 합니다.
그런 다음 사용할 해당 로더를 가져와야 합니다!
1단계 : npm을 통해 사용해야 하는 로더를 설치합니다.
(npm install --save-dev CSS-loader) (npm install --save-dev 스타일 로더)
webpack 공식 웹사이트에서 스타일에 로더를 사용하는 다음 방법을 찾으세요. 
2단계 : webpack.config.js의 모듈 키워드 아래에 구성 지침을 작성합니다
. css-loader는 CSS 파일 로드 만 담당하며 특정 CSS 스타일을 문서에 삽입하는 작업은 담당하지 않습니다
. 로더는 우리가 처리하는 데 도움이 됩니다
참고: 스타일 로더는 CSS 로더 앞에 배치되어야 합니다.
2) Less 파일 처리
1단계 : 해당 로더를 설치합니다(참고: webpack은 less 파일을 컴파일하는 데 less를 사용하므로 여기에 less도 설치됩니다). 명령: npm install --save-dev less-loader less
2단계 : 해당 구성 파일(webpack.config.js에 있음)을 수정하고 .less 파일 처리를 위한 규칙 옵션을 추가합니다. 다음과 같이:
3) 이미지 파일 처리
1단계 : 프로젝트에 두 개의 이미지를 추가합니다(하나는 8kb 미만, 다른 하나는 8kb 이상).
2단계 : 먼저 다음과 같이 CSS 스타일에서 이미지 참조를 고려합니다.
3단계 : 해당 구성 파일(webpack.config.js에 있음)을 수정하고 이미지 파일 처리를 위한 규칙 옵션을 추가합니다. 다음과 같이:
4단계 : 8kb보다 큰 이미지는 file-loader를 통해 처리되지만 우리 프로젝트에는 file-loader가 없기 때문에 패키징 후 오류가 발견되었습니다. ( file-loader를 설치하고 npm install --save-dev file-loader 명령을 실행해야 합니다.) 설치 및 패키징을 완료하면 dist 폴더에 추가 이미지 파일이 있는 것을 확인할 수 있습니다.
설명:
webpack이 자동으로 매우 긴 이름을 생성한 것으로 나타났습니다
. 1. 이름 중복을 방지하기 위한 32비트 해시 값입니다.
2. 그러나 실제 개발에서는 패키지된 이미지 이름에 대한 특정 요구 사항이 있을 수 있으므로
옵션에 다음 옵션을 추가할 수 있습니다.
1. img: 파일이 패키지될 폴더입니다.
2. 이름 : 사진의 원본 이름을 얻어서 이 위치에 넣어주세요
3. Hash8: 이미지 이름 충돌을 방지하기 위해 해시가 계속 사용되지만 8비트만 유지됩니다.
4. ext: 다음과 같이 이미지의 원래 확장자를 사용합니다. 
또한 나중에 이미지에 사용되는 경로를 구성하고 수정해야 합니다
. 1. 기본적으로 webpack은 생성된 경로를 사용자에게 반환합니다.
2. 그러나 전체 프로그램은 dist 폴더에 패키징되어 있으므로 여기서 경로에 또 다른 dist/를 추가해야 합니다.
다음과 같이: 
요약하면 패키징 후 이미지 파일은 다음과 같습니다. 
4) ES6에서 ES5로 바벨
2단계: main.js에서 Vue 가져오기('vue'에서 Vue 가져오기)는 다음과 같습니다.
3단계: 다음과 같이 index.html의 vue 인스턴스에 p를 걸어 놓습니다.
4단계: 패키징 후 오류가 발견되었습니다. 우리가 사용하는 vue가 런타임 컴파일러 버전임을 지정해야 합니다.
특정 작업: 다음과 같이 webpack에 해결을 추가하고 별칭( alias )을 가져와야 합니다.
1단계: index.html의 vue 인스턴스에 p를 걸어 놓습니다.
2단계: APP 컴포넌트를 main.js 파일로 가져오고 , Vue 인스턴스에 APP를 등록하고 , Vue 템플릿에서 컴포넌트 APP를 사용합니다 ( 컴포넌트화 ).
3단계: 다음과 같이 APP.vue 파일을 생성하고 vue 페이지의 템플릿을 js 코드 및 CSS 코드 에서 분리합니다.
4단계: vue의 해당 로더를 구성합니다.
webpack.config.js의 구성 파일을 수정합니다.
1. 플러그인 이해
2. Webpack-저작권 정보 추가 플러그인 사용
3. 패키지 HTML 플러그인
4. js 압축 플러그인
Webpack은 선택적인 로컬 개발 서버를 제공합니다. 이 로컬 서버는 node.js를 기반으로 구축되었으며 내부적으로 Express 프레임워크를 사용하여 브라우저가 수정된 결과를 자동으로 새로 고치고 표시 할 수 있도록 합니다. .
그러나 별도의 모듈이므로 webpck에서 사용하기 전에 설치해야 합니다. 명령: (npm install --save-dev [email protected])
devserver도 webpack 의 옵션 입니다. 다음 속성 으로 설정할 수 있습니다.
1. contentBase: 로컬 서비스를 제공하는 폴더입니다. 기본값은 루트 폴더입니다. 여기에 ./dist를 입력해야 합니다.
2. 포트: 포트 번호
3. 인라인: 실시간으로 페이지 새로 고침
4. HistoryApiFallback: SPA 페이지에서
HTML5에 의존하는 히스토리 모드 webpack.config.js 파일 구성을 다음과 같이 수정합니다. 
–open 매개변수는 브라우저를 직접 여는 것을 의미합니다.
또한
아래에서는 webpack 구성 파일을 분리하려고 합니다. 즉, 개발 에 필요한 것과 게시 ( 컴파일 )에 사용되는 것을 분리합니다. 다음과 같이:
1. CLI는 무엇을 의미하나요?
. . Vue CLI 사용을 위한 전제조건 - Node (Node 설치 필요)
단, Node를 사용하려면NPM
이 반드시 필요합니다.
3. Vue CLI를 사용하여
Vue 스캐폴딩 설치
npm install -g @vue/cli
참고: 위에 설치된 버전은 Vue CLI2 방식에 따라 프로젝트를 초기화하려는 경우
초기화가
Vue CLI2 프로젝트
vue init webpack my -project