webpack subpackage+vue-cli 다른 명령줄에 따라 다른 프로젝트 실행/패키지
기사 디렉토리
머리말
나는 정부 소프트웨어 개발에 종사하고 있으며 정부 소프트웨어 개발은 종종 맞춤형 개발이지만 다시 나타날 것입니다. 예를 들어 이 단위에는 이 페이지가 필요하고 해당 단위에는 이 페이지가 필요하지 않으며 시간이 지남에 따라 프런트 엔드 프로젝트는 서로 다른 단위의 요구 사항이 동일한 프로젝트에 있고 패키징 속도가 점점 느려지기 때문에 점점 더 중복됩니다. 이럴 때는 하도급이 시급해 보인다.
1. 웹팩 서브패키징이란?
서브패키징은 문자 그대로의 의미와 같으며, 스몰 프로그램은 메인 패키지의 코드 메모리를 2M 이하로 제한하기 때문에 스몰 프로그램도 서브 패키징 기능을 가지고 있습니다.다른 프로젝트에 따르면 해당 프로젝트는 패키징을 줄여 파일 메모리.
2. 작업 단계
1. webpack 항목을 수정하여 단일 항목을 여러 항목으로 변경
vue-cli를 예로 들어 보겠습니다.
원래 vue.config.js에는 단일 항목만 있었습니다.
수정 후: 
projectA와 projectB는 서로 다른 프로젝트에 해당하지만 이 두 프로젝트는 동일한 패키지에 있고 일부 공용 구성 요소는 내부에 있습니다. 둘 다 공유할 수 있는 공개 도구이지만 유일한 차이점은 A와 B의 페이지가 다르다는 것입니다.
2. 프로젝트 구조 수정
이제 프로젝트 A와 프로젝트 B가 vue-config에 구성되었으므로 그림과 같이 프로젝트 구조도 그에 따라 수정해야 합니다. 실제로 이전 app.vue, main.js
및 기타 파일이 하나 더 복사됩니다. 일반적으로 사용되는 파일 및 구성 요소는 외부 구성 요소 또는까지 배치됩니다.
3. 다른 명령줄에 따라 다른 패키지 만들기
위의 두 단계가 완료되면 기본적으로 서브패키지는 끝난 상태이며, 다음으로 필요한 것은 npm install --save-dev cross-env 크로스 플랫폼 설정 및 환경변수 사용을 위한 스크립트입니다. 그런 다음 package.json에서 실행 중인 코드를 수정합니다.
동시에 그림과 같이 vue.config, js를 수정해야 합니다.
최종 실행 결과는 다음과 같습니다.
요약하다
여기서 webpack 하위 패키지는 단지 아이디어를 제공하는 것입니다. 사실 git을 사용하여 다른 버전 간의 차이점을 관리할 수도 있습니다. 이 방법은 현재 더 일반적으로 사용됩니다. 단순히 BFF 모드를 사용하여 해결하거나 lerna를 사용할 수도 있습니다. 간단히 말해 개인 취향에 따라 물리적 격리를 잘 하세요! ! !