title: Module parse failed: Unexpected character for woff woff2 and ttf file webpack
body: <p>I have <strong>webpack.config.js</strong> file and added loader for each font type in individual module block but when I run <code>yarn start</code></p>
  
  <p>webback complied successfully  with this details in terminal</p>
  
  <pre><code>  f4769f9bdb7466be65088239c12046d1.eot    20.1 kB          [emitted]         
  448c34a56d699c29117adc64c43affeb.woff2      18 kB          [emitted]         
   fa2772327f55d8198301fdb8bcfc8158.woff    23.4 kB          [emitted]         
    e18bbf611f2a2e43afc071aa2f4e1512.ttf    45.4 kB          [emitted]         
    89889688147bd7575d6327160d64e760.svg     109 kB          [emitted]         
                               bundle.js    1.56 MB       0  [emitted]  [big]  main
                             favicon.ico    1.15 kB          [emitted]         
                              index.html  605 bytes          [emitted]  
  </code></pre>
  
  <p>and page open in the browser with bootstrap css applied on it BUT in the console, it gives multiple errors for <em>woff</em> <em>woff2</em> and <em>ttf</em> file ( see image)</p>
  
  <blockquote>
    <p>Module parse failed: Unexpected character '' (1:4)<br>
    You may need an appropriate loader to handle this file type.<br>
    (Source code omitted for this binary file)</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/Rr0uy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rr0uy.png" alt="console error"></a></p>
  
  <h3>package.json</h3>
  
  <pre><code>"dependencies": {
      "bootstrap": "^3.3.7",
      "css-loader": "^0.28.7",
      "extract-text-webpack-plugin": "^3.0.2",
      "file-loader": "^1.1.5",
      "history": "^4.7.2",
      "html-webpack-plugin": "^2.30.1",
      "less": "^2.7.3",
      "less-loader": "^4.0.5",
      "path": "^0.12.7",
      "postcss-loader": "^2.0.8",
      "react": "^16.0.0",
      "react-dom": "^16.0.0",
      "react-redux": "^5.0.6",
      "react-redux-form": "^1.16.0",
      "react-router-dom": "^4.2.2",
      "redux": "^3.7.2",
      "redux-logger": "^3.0.6",
      "redux-thunk": "^2.2.0",
      "style-loader": "^0.19.0",
      "svg-inline-loader": "^0.8.0",
      "uglifyjs-webpack-plugin": "^1.0.1",
      "url-loader": "^0.6.2",
      "webpack-combine-loaders": "^2.0.3"
    },
    "devDependencies": {
      "babel-core": "^6.26.0",
      "babel-eslint": "^8.0.2",
      "babel-loader": "^7.1.2",
      "babel-plugin-transform-es2015-destructuring": "^6.23.0",
      "babel-plugin-transform-object-rest-spread": "^6.26.0",
      "babel-preset-env": "^1.6.1",
      "babel-preset-react": "^6.24.1",
      "eslint": "^4.10.0",
      "eslint-config-airbnb": "^16.1.0",
      "eslint-plugin-flowtype": "^2.39.1",
      "eslint-plugin-html": "^3.2.2",
      "eslint-plugin-import": "^2.8.0",
      "eslint-plugin-jsx-a11y": "^6.0.2",
      "eslint-plugin-react": "^7.4.0",
      "webpack": "^3.8.1",
      "webpack-dev-server": "^2.9.4"
    },
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "webpack-dev-server"
    }
  </code></pre>
  
  <h3>webpack.config.js</h3>
  
  <pre><code>const webpack = require('webpack');
  const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // eslint-disable-line
  const path = require('path');
  const combineLoaders = require('webpack-combine-loaders');
  
  const BUILD_DIR = path.resolve(__dirname, 'build');
  const APP_DIR = path.resolve(__dirname, 'src');
  
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      favicon: './src/assets/favicon.ico',
      inject: 'body'
  });
  // const extractPluginConfig = new ExtractTextPlugin({filename:'style.css', disable: false, allChunks: true});
  module.exports = {
      context: __dirname,
      entry: [
          'webpack-dev-server/client?http://localhost:8080',
          'webpack/hot/only-dev-server',
          APP_DIR + '/index.jsx',
      ],
      output: {
          publicPath: '/',
          path: BUILD_DIR,
          filename: 'bundle.js'
      },
      module: {
          loaders: [{
                  test: /\.jsx?/,
                  loader: 'babel-loader',
                  include: path.join(__dirname, 'src'),
                  exclude: /(node_modules|bower_components)/,
                  query: { presets: ["env", "react"] }
              },
              {
                  test: /\.css$/,
                  // exclude: /node_modules/,
                  loader: 'style-loader!css-loader?importLoaders=1'
              },
              {
                  test: /\.scss$/,
                  loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')
              },
              {
                  test: /\.less$/,
                  loader: 'style-loader!css-loader!postcss-loader!less-loader'
              },
              {
                  test: /\.json$/,
                  loader: 'json'
              },
              {
                  test: /\.png$/,
                  loader: "url-loader",
                  query: {
                      limit: 100000
                  }
              },
              {
                  test: /\.jpg$/,
                  loader: "url-loader"
              },
              {
                  test: /\.svg(\?.*)?$/,
                  loader: "url-loader",
                  query: {
                      limit: 10000,
                      mimetype: 'image/svg+xml'
                  }
              },
              {
                  test: /\.(woff2?)(\?.*)?$/,
                  loader: "url-loader",
                  query: {
                      limit: 10000,
                      mimetype: 'application/font-woff'
                  }
              },
              {
                  test: /\.(ttf|otf)(\?.*)?$/,
                  loader: 'url-loader',
                  query: {
                      limit: 10000,
                      mimetype: 'application/octet-stream'
                  }
              },
              {
                  test: /\.eot(\?.*)?$/,
                  loader: 'file-loader'
              }
          ]
      },
      resolve: {
          extensions: ['.js', '.jsx', '.css', '.less', '.json']
      },
      plugins: [
          new webpack.HotModuleReplacementPlugin(),
          new webpack.DefinePlugin({
              'process.env': {
                  'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
              }
          }),
          // new UglifyJsPlugin(), for production server only
          HtmlWebpackPluginConfig
      ],
      devServer: {
          historyApiFallback: true,
          hot: true
      }
  }
  </code></pre>
  
  <h3><em>index.jsx</em></h3>
  
  <pre><code> import 'bootstrap/dist/css/bootstrap.css'
  </code></pre>
  
  <p>what I have tried various comibinations in place of above modules for loaders from <a href="https://github.com/webpack-contrib/css-loader/issues/38" rel="nofollow noreferrer">github solution</a> but none of them is working, see the trials</p>
  
  <p>trial 1 ( using file loader)</p>
  
  <pre><code>    { 
        test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/, 
        loader: 'file-loader?name=[path][name].[ext]?[hash]' 
      }
  </code></pre>
  
  <p>trial 2 ( using url loader)</p>
  
  <pre><code>    { 
         test: /\.(woff(2)?|eot|ttf|otf)(\?[a-z0-9]+)?$/, 
         loader: 'url-loader?limit=100000' 
      }
  </code></pre>
  
  <p>trial 3 (using url loader with lower limit)</p>
  
  <pre><code>        {
              test: /\.(woff2?|ttf|eot|svg|png|jpe?g|gif)(\?v=\d+\.\d+\.\d+)?$/,
              loader: 'url-loader?limit=8192'
          },
  </code></pre>