글꼴이 webpack 빌드에서로드되지 않습니다.

Question

빌드 프로세스가 정상적으로 작동하면 글꼴이 브라우저에서 렌더링되지 않습니다. Webpack 올바르게 글꼴 파일을 public/fonts 디렉터리로 이동합니다. 작성된 CSS 파일은 글꼴 파일에 대한 올바른 경로를 보여줍니다.

         Asset  Size Chunks    Chunk Names 
        ../fonts/icon_set_2.svg 20.9 kB   [emitted] 
    ../fonts/glyphicons-halflings-regular.eot 20.1 kB   [emitted] 
../fonts/glyphicons-halflings-regular.woff 23.4 kB   [emitted] 
    ../fonts/glyphicons-halflings-regular.ttf 45.4 kB   [emitted] 
    ../fonts/glyphicons-halflings-regular.svg 109 kB   [emitted] 
        ../fonts/icon_set_1.eot 71.6 kB   [emitted] 
        ../fonts/icon_set_1.woff 41.9 kB   [emitted] 
        ../fonts/icon_set_1.ttf 71.5 kB   [emitted] 
        ../fonts/icon_set_1.svg 98.5 kB   [emitted] 
        ../fonts/icon_set_2.eot 13.9 kB   [emitted] 
        ../fonts/icon_set_2.woff 7.85 kB   [emitted] 
        ../fonts/icon_set_2.ttf 13.7 kB   [emitted] 
../fonts/glyphicons-halflings-regular.woff2 18 kB   [emitted] 
         ../fonts/fontello.eot 533 kB   [emitted] 
        ../fonts/fontello.woff 321 kB   [emitted] 
         ../fonts/fontello.ttf 532 kB   [emitted] 
         ../fonts/fontello.svg 826 kB   [emitted] 
         ../fonts/Glyphter.eot 7.22 kB   [emitted] 
        ../fonts/Glyphter.woff 5.02 kB   [emitted] 
         ../fonts/Glyphter.ttf 7.06 kB   [emitted] 
         ../fonts/Glyphter.svg 45.2 kB   [emitted] 
          main.bundle.js 1.2 MB  0 [emitted] main 
          vendor.bundle.js 3.74 MB  1 [emitted] vendor 
         main.bundle.js.map 1.72 MB  0 [emitted] main 
         vendor.bundle.js.map 5.58 MB  1 [emitted] vendor 

이 부트 스트랩 파일입니다 브라우저, :

@font-face { 
    font-family: 'Glyphicons Halflings'; 

    src: url(/../fonts/glyphicons-halflings-regular.eot); 
    src: url(/../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(/../fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(/../fonts/glyphicons-halflings-regular.woff) format('woff'), url(/../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(/../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg'); 
} 

를 수신 : 여기

{ 
    test: /\.s?css$/, 
    loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] 
}, 
{ 
    test: /\.(eot|svg|ttf|woff|woff2)/, 
    loader: 'file?name=../fonts/[name].[ext]' 
}, 
{ 
    test: /\.(png|jpg|gif)$/, 
    loader: "url-loader?limit=100000" 
} 

는 빌드 출력 : 여기에

는 로더 구성입니다 그리고 이것은 공개 디렉토리의 디렉토리 구조입니다.

+ public 
    + build 
     main.bundle.js 
     vendor.bundle.js 
    + fonts 
     glyphicons-halflings-regular.eot 
     rest of font files... 

그러나 글꼴 (글리 phicons)을 사용하려고하면 올바르게 렌더링되지 않습니다.

Answer 1

이유는 모르겠지만 글꼴의 상대 경로를 사용할 수 없습니다. 나는 똑같은 문제를 겪고 있었고 제 작품은 글꼴을 "build"디렉토리 아래의 폴더에 넣는 것이 었습니다. 그래서 디렉토리 구조는 다음과 같습니다

{ 
    test: /\.woff(2)?(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/, 
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=fonts/[name].[ext]' 
}, 
{ 
    test: /\.(ttf|eot|svg)(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/, 
    loader: 'file-loader?name=fonts/[name].[ext]' 
}, 
{ 
    test: /\.css$/, 
    loader: 'style-loader!css-loader' 
}, 

는 또한 웹팩 2.0의대로로, 모든 로더의 * -loader 버전을 사용해야 있습니다 :

+ public 
    + build 
     main.bundle.js 
     vendor.bundle.js 
     + fonts 
      glyphicons-halflings-regular.eot 
      rest of font files... 

가 여기 내 로더가 어떻게 생겼는지입니다 내보기에서.

희망이 있습니다.