webpack2を使ってttfファイルを読み込む方法は？

Question

webpack2を使用していますが、ttfファイルの読み込みに失敗しました。

fonts/font-roboto.scss：私は以下のように私のSCSSファイルを定義し

@font-face { 
    font-family: Roboto-Bold; 
    src: url('./roboto/Roboto-Bold.ttf'); 
} 

私は

import '../fonts/font-roboto.scss'; 

以下のようsrc/components/App.jsxからこのファイルをインポートするとき、私はエラーの下に出る：

ERROR in ../~/css-loader?{"sourceMap":true}!../~/sass-loader/lib/loader.js?{"sourceMap":true}!../~/resolve-url-load 
er!../fonts/font-roboto.scss 
Module not found: Error: Can't resolve 'url-loader' in '/Users/joey/dev/reactjs/jump/src' 
@ ../~/css-loader?{"sourceMap":true}!../~/sass-loader/lib/loader.js?{"sourceMap":true}!../~/resolve-url-loader!../ 
fonts/font-roboto.scss 6:84-126 
@ ../fonts/font-roboto.scss 
@ ./components/App.jsx 
@ ./index.jsx 
@ multi babel-polyfill ./index.jsx 

私はこの問題を解決する方法がわかりません。私のWebPACK configureコンファイルのとおりです。私のフォルダ構造は以下のように示されている

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    context: path.resolve(__dirname, './src'), 
    entry: [ 
    'babel-polyfill', 
    './index.jsx' 
    ], 
    output: { 
    path: path.resolve(__dirname, './dist/'), 
    publicPath: '/', 
    filename: 'app.[hash].js' 
    }, 
    module: { 
    rules: [{ 
     test: /\.(jsx?)$/, 
     exclude: /(node_modules|.tmp-globalize-webpack)/, 
     use: ['babel-loader'] 
     }, 
     { 
     test: /\.(jpe?g|png|gif)$/i, 
     use: [ 
      'file-loader?hash=sha512&digest=hex&name=assets/[hash].[ext]', 
      'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false' 
     ] 
     }, 
     { 
     test: /\.(svg)$/i, 
     use: [{ 
      loader: 'babel-loader' 
      }, 
      { 
      loader: 'react-svg-loader', 
      query: { 
       svgo: { 
       plugins: [{ 
        removeTitle: false 
       }], 
       floatPrecision: 2 
       } 
      } 
      } 
     ] 
     }, 
     { 
     test: /\.(png|woff|eot|ttf|woff2)(\?.*$|$)/, 
     loader: 'url-loader?limit=100000&mimetype=application/font-woff' 
     }, 
     { 
     test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'file-loader?name=images/[hash].[ext]', 
     }, 
     { 
     test: /\.css$/, 
     use: ['style-loader', 'css-loader', 'resolve-url-loader'] 
     }, 
     { 
     test: /\.scss$/, 
     use: [{ 
      loader: 'style-loader' 
      }, 
      { 
      loader: 'css-loader', 
      options: { 
       sourceMap: true 
      } 
      }, 
      { 
      loader: 'sass-loader', 
      options: { 
       sourceMap: true 
      } 
      }, 
      { 
      loader: 'resolve-url-loader' 
      } 
     ] 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ hash: false, template: './index.html' }) 
    ], 
    node: { 
    fs: 'empty', 
    module: 'empty' 
    } 
}; 

：

した後にエラーがなくなったが、私は、ブラウザのコンソールに警告メッセージの下になっているurl-loaderをインストールします。

Failed to decode downloaded font: data:application/font-woff;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVib…BhdGhfXyArICJpbWFnZXMvZDMyOWNjOGIzNDY2N2YxMTRhOTU0MjJhYWFkMWIwNjMudHRmIjs= 
localhost/:1 OTS parsing error: invalid version tag 

Answer 1

投稿したエラーメッセージを見て、

Module not found: Error: Can't resolve 'url-loader'

あなたがurl-loaderをインストールする必要が表示されます - あなたの端末にnpm i url-loader --saveでこれを行います。

Answer 2

変更からあなたの設定のこのビット：

 { 
     test: /\.(png|woff|eot|ttf|woff2)(\?.*$|$)/, 
     loader: "url-loader?limit=100000&mimetype=application/font-woff", 
     }, 
     { 
     test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: "file-loader?name=images/[hash].[ext]", 
     } 

へ：

{ 
    test: /\.(ttf|eot|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: "file-loader?name=images/[hash].[ext]", 
    }