vue-cli와 webpack이 정적 리소스를 처리하는 방법

정적 리소스 처리

vue-cli와 webpack을 결합한 프로젝트에는 일반적으로 src/assets와 static/이라는 두 가지 정적 리소스 경로가 있다는 것을 알 수 있습니다. 이번 글에서는 주로 vue-cli와 webpack을 결합하여 정적 리소스를 처리하는 방법을 소개하고 있는데, 편집자는 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

Packaged resources

이 질문에 대답하려면 먼저 Webpack이 정적 리소스를 처리하는 방법을 이해해야 합니다. *.vue 구성 요소에서 모든 템플릿과 CSS 모듈은 vue-html-loader 및 css-loader에 의해 구문 분석되어 경로 URL을 찾습니다.

예를 들어 및 background: url(./logo.png)에서 "./logo.png"는 상대 경로이며 종속성 로딩으로 처리됩니다. .

하지만 logo.png는 JavaScript가 아니기 때문에 종속 꽃으로 간주되면 url-loader와 file-loader를 통해 구문 분석해야 합니다. 이 템플릿에는 해당 로더가 이미 구성되어 있으므로 일반적으로 상대 경로 배포 문제에 대해 걱정할 필요가 없습니다.

이러한 리소스는 빌드 프로세스 중에 인라인/복사/이름 변경될 수 있지만 여전히 소스 코드의 중요한 부분입니다. 그렇기 때문에 다른 리소스 폴더와 마찬가지로 정적 리소스를 별도의 /src 폴더에 배치하는 것이 좋습니다.

사실 꼭 /src/assets에 다 넣을 필요는 없고, 모듈/컴포넌트별로 정리해서 활용하면 됩니다. 예를 들어 모든 구성 요소를 자체 디렉터리에 넣고 해당 디렉터리에 정적 리소스를 저장할 수 있습니다.

리소스 소개 규칙

./assets/logo.png와 같은 상대 경로는 모듈 종속성으로 구문 분석됩니다. 이는 Webpack 출력 구성에 따라 자동으로 생성된 URL로 대체됩니다.

assets/logo.png와 같이 접두사가 없는 경로는 상대 경로와 동일하며 ./assets/logo.png로 이스케이프됩니다.

~접두사가 있는 경로입니다. ~는 require('some-module/image.png')와 마찬가지로 모듈 요청으로 간주됩니다. /assets/log.png

JavaScript에서 리소스 경로 가져오기

computed: {
 background () {
  return require('./bgs/' + this.id + '.jpg')
 }
}

와 같은 루트 경로 이 리소스 경로는 file-loader에서도 처리되어 처리된 경로를 반환합니다. 그리고 Webpack은 bgs 디렉터리의 모든 이미지를 한 번에 로드합니다.

"실제" 정적 리소스

반대로 static/에 있는 파일은 Webpack에서 처리되지 않습니다. 해당 파일은 대상 폴더에 직접 복사되며 이러한 파일을 참조하려면 절대 경로를 사용해야 합니다.

관련 권장 사항:

thinkphp5에서 정적 리소스 경로와 상수를 로드하는 방법의 예

위 내용은 vue-cli와 webpack이 정적 리소스를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!