简体   繁体   中英

webpack not loading my font files

As has happened to many others before, webpack is simply not loading any of my fonts into the build. I've looked at the boards, searched google, tried many different regex tricks and tried other techniques like the copy-webpack-plugin from npm. The build is run via a generic 'npm start'. Please take a look at the below directory structure and my webpack build file and tell me what I might be missing. Thx :-P

Directory Structure (folders in CAPS):

/
 - index.html
 - index.js
 - webpack.config.js
 - server.js
 ASSETS
  FONTS
   <font files>
 COMPONENTS
 CONTAINERS, etc..

my webpack file (test for fonts at the bottom):

var path = require('path')
var webpack = require('webpack')
var CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'eventsource-polyfill',
    'whatwg-fetch',
    'webpack-hot-middleware/client',
    './index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: [ 'react-hot', 'babel' ],
      exclude: /node_modules/,
      include: __dirname
    }, {
      test: /\.css?$/,
      loaders: [ 'style', 'raw' ],
      include: __dirname
    },
      {
        test: /\.less$/,
        loaders: ['style', 'css', 'less'],
        include: __dirname
      },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }]
  }
}

I've never needed all the regex in the test.

Example of one of my webpack files:

module: {
loaders: [
    // Javascript
    { test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/ },
    // Stylesheets
    { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap') },
    // Font Definitions
    { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=public/fonts/[name].[ext]' },
    { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' },
    { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]' },
    { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]' },
    { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]' }
  ]
},

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM