웹팩 :로드되지 webpack.config.js 글꼴이 제대로

Question

내 CSS/fonts 디렉토리에서 글꼴을로드하기위한 것입니다 https://survivejs.com/webpack/styling/loading/

{ 
     test: /\.(woff|woff2|eot|ttf|svg|otf)(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url-loader', 
     options:{ 
      name: '[name].[ext]' 
     } 
     }, 

에서 다음 웹팩 조각이있다. 내 CSS 디렉토리는 그에게 다음과 같은 파일이 있습니다

type/ 
img/ 
design.css 

내 프로젝트에 성공적으로 CSS 파일 및 IMG 파일을 사용할 수있게되었습니다. 다음과 같은 유형에서

나는이 내 design.css에서 참조

font-bold-v01.otf 
font-bold-v01.woff 

다음과 같은 형식으로 글꼴의 무리가 있습니다

src: url("./type/font-bold-v01.woff") format("woff"), 

내가 제거하면 내 웹 팩 스 니펫 오류가 발생합니다. 내 스 니펫을 사용하면 오류는 없지만 글꼴은 웹팩이 아닌 프로젝트에서 작동하는 구성 요소에는 영향을 미치지 않습니다.

어떤 아이디어가 있습니까? 문제의

요점 : https://gist.github.com/MatthewJamesBoyle/2cebb7d1cdc76dc1692125d08fd9a31d

Answer 1

귀하의 글꼴이 JS에 포함되고, 즉 JS가 HTML에 포함되지 않습니다 때 작동 중단 이유

불행하게도이 웹팩 1, 당신은해야합니다

이 플러그인을 설치 : 독립형 파일에 CSS 자산 (글꼴/이미지)를 구축하고자하는 경우 웹팩 2

에 대한 조정

를 (혼동을 일으킬 정도로, 실제로 파일 작가) 파일 로더 대신 URL 로더의

// in your webpack.config.js file 
var ExtractTextPlugin = require('extract-text-webpack-plugin') 


// in the "module" section of your webpack config 
plugins:[ 
new ExtractTextPlugin(
      './css/[name].css', 
      { 
      allChunks:true, 
     }), 
//... 
] 

및 사용 :

//in the "module/loaders" section of your webpack config 

      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract("style-loader", "css-loader") 
      }, 

      { 
       test: /\.(woff|woff2|eot|ttf|svg|jpg|png|ico)(\?.+)?$/, 
       loader: 'file-loader', 
       query: { 
        name: './static/[name].[ext]' 
       } 
      }, 

를

npm install --save-dev file-loader 
npm install --save-dev extract-text-webpack-plugin@1.0.1 

사용 ExtractTextPlugin는 CSS를 작성하는 파일 로더가 글꼴에 대한 static 하위 폴더를 지정

주에 wrritten합니다.

만들기를

/home/user/project/build/static

및

의 CSS :이 폴더에 글꼴을 얻을 것이다 config (설정)이 예와

output: { 
     publicPath: '/', // HTTP server base URL 
     path: '/home/user/project/build', // filesystem path for the webpack bundles 
} 
//... 

: 확실히 당신이 당신의 웹팩 설정 객체의 최상위에 설정

/home/user/project/build/css