웹팩 구성 및 패키징 후 이미지 경로 오류 처리 방법

이번에는 웹팩 구성으로 이미지를 패키징할 때 경로 오류를 처리하는 방법을 알려드리겠습니다. 웹팩 구성 및 패키징 후 그림 경로 오류를 처리할 때 주의사항

은 무엇입니까? 함께 보세요.

문제

개발환경에서 프로젝트가 정상적으로 작동하는데, 패키징을 해보니, 요소를 확인해보니 경로가 잘못된 것으로 확인됩니다.

이미지 경로는 Background

: url(/static/img/bg_camera_tip.bd37151.png) 인데 이 경로에는 파일이 존재하지 않습니다.

패키지 파일 디렉터리는 다음과 같습니다.

배경 이미지의 경로는 ../../static이어야 하지만 실제로는 /static임을 알 수 있습니다. 해결

방법 1

빌드 디렉터리에서 webpack.base.conf.js 구성을 확인하세요. 이미지 파일은 url-loader로 처리됩니다.

 module: {
  rules: [
   ...
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   ...
  ]
 }

그 기능은 파일 크기가 제한 제한보다 작을 때 base64 문자열을 반환하는 것입니다. 실제로 이미지 리소스를 base64 문자열로 인코딩하여 CSS 파일에 넣습니다. 사진은 서버에서 다운로드해야 합니다. 그러나 파일이 너무 크면 base64 문자열이 매우 길어집니다. CSS 파일에 배치하면 파일이 매우 커져 CSS 파일 다운로드 시간이 길어지고 이득이 손실보다 커집니다. 따라서 이 범위 내의 문자열만 base64 문자열로 변환되며 단위는 바이트입니다. 이 문제에 대해 로더는 참조된 이미지 주소를 수정하는 데 사용되는 publicPath 매개변수도 제공합니다. 기본값은 현재 경로이므로 직접 변경하세요. 즉, 아래에 publicPath: '../.. 매개변수를 추가하세요. 옵션 노드 /'.

 module: {
  rules: [
   ...
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     publicPath: '../../', //你实际项目的引用地址前缀
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   ...
  ]
 }

방법 2

webpack.base.conf.js에도 규칙이 있습니다. 각 vue 파일은 vueLoaderConfig

 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
   },
   ...
  ]
 }

vueLoaderConfig에 의해 처리되며, 이는 build/vue-loader.conf.js에 있습니다. /utils.js cssLoaders 메소드를 빌드합니다.

  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  }

프로덕션 환경에서 options.extract 값이 true인 경우 ExtractTextPlugin 플러그인이 호출되어 처리됩니다. 해당 기능은 프로젝트에서 참조되는 스타일 파일을 독립적인 CSS 파일로 추출하여 모든 CSS가 가능하도록 하는 것입니다. 한 번에 로드 가능 파일은 CSS 파일의 병렬 로드와 동일하므로 네트워크 요청 수를 줄일 수 있습니다. 더 많은 장점과 용도는 ExtractTextWebpackPlugin을 참조하세요. 이 질문으로 돌아가서, 여기에는 지정된 로더의 publicPath 구성을 재정의할 수 있는 또 다른 매개변수인 publicPath도 있습니다. 그런 다음 이전 구성과 마찬가지로 참조 파일의 경로 주소를 모든 로더에 대해 균일하게 구성할 수 있습니다.

또한 여기서 user:loader는 실제로 일련의 로더 컬렉션을 반환하며 cssLoaders의 반환은

 return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

입니다. 이는 webpack.base.conf에서 sass-loader를 구성하지 않아도 SASS 구문을 사용할 수 있다는 의미입니다. js 이유.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue에서 PopupWindow 구성 요소를 사용하는 단계 분석

각 라우팅 강조 표시 구현 단계에 대한 자세한 설명

위 내용은 웹팩 구성 및 패키징 후 이미지 경로 오류 처리 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!