2016-07-11 11 views
1

fontello로 만든 맞춤 아이콘 글꼴을 사용하고 있습니다. 웹팩이를 사용하려고 할 때 , 나는 다음과 같은 오류 얻을 :Webpack이 fontello 글꼴을 구문 분석 할 수 없습니다.

ERROR in ./src/assets/fonts/fontello/fontello.ttf?86736756 
Module parse failed: 
/Users/idamediafoundry/Documents/Work/Projects/ida-ida-default- 
frontend-setup/ida-ida-default-frontend-setup- 
static/src/assets/fonts/fontello/fontello.ttf?86736756 Unexpected 
character '' (1:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '' (1:0) 

을 그리고 그들 모두 ... WOFF (2), TTF, SVG를 위해이 작업을 수행합니다. SOF에서 발견 된 여러 솔루션을 사용했지만 그 중 아무 것도 작동하지 않는 것 같습니다. 이 일에 어떤 아이디어를 가지고

module: { 
     loaders: [ 
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/}, 
      { test: /\.css$/, loader: "style!css!" }, 
     { test: /\.scss$/, loader: "style!css!sass!" }, 


     { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, 
     { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, 
     { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'}, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}, 


    ] 
} 

사람 :

이 내 webpack.config.js입니까?

감사합니다.

감사

마리오

답변

1

protip : WOFF는 그대로 바이트 단위 래퍼이기 때문에 폰트 더 이상 존재하지 않는 형식, 그래서 아무 eot 또는 svg 글꼴 등을 사용하지 않는 주변 TTF/OTF , WOFF가 있다면 ttf/otf가 없습니다. 그것은 하나의 문제, 즉 복잡성을 해결합니다. 이제 그 단일 글꼴 형식을 사용합니다. 정적 애셋을 자바 스크립트 번들로 묶지 말고, 브라우저가 적절한 캐싱,로드 방지 등으로로드하도록하십시오.이를 번들링하면 낭비하게됩니다. 누군가가 변경하지 않은 데이터에 대해 번들을로드 할 때마다 많은 양의 대역폭이 필요합니다. 일부 코드는 변경했으나 정적 자산은 그대로 유지 되었습니까? 좋은 소식, 번들은 이제 전체를 다시 다운로드 할 것입니다.. 이는 호스팅 비용 때문에 사용자의 시간, 대역폭 및 잠재적으로 실제 비용을 낭비합니다.

정적 애셋을 번들 밖으로 유지하고 글꼴을 일반적인 CSS @ 글꼴 - 얼굴 규칙으로 만듭니다. 괜찮을거야, 잘로드 될거야. 캐시 될거고, 후속로드가 훨씬 빨라서 서버를 치지 않아도 글꼴 파일을 다시 옮길 수있다.

0

글쎄, 나는 또한

가 웹팩이 시도, 그것은 폰트 URL에 후행? "234234234"때문 동일한 문제를 다른 일을 가진 적은 로더 문제 목록에서 해결책을 발견했다 로더 설정 :

test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/ 

희망 만약 당신이 (또는 누군가) 여전히 문제가 있다면 도움이 될 것입니다. Original thread of solution in git