webpack没有加载我的字体文件

时间:2017-01-26 22:22:47

标签: javascript node.js fonts webpack

正如之前许多其他人所发生的那样,webpack根本就没有将任何字体加载到构建中。我看了看板,搜索谷歌,尝试了许多不同的正则表达技巧,并尝试了其他技术,如来自npm的copy-webpack-plugin。构建通过通用的'npm start'运行。请查看下面的目录结构和我的webpack构建文件,并告诉我可能缺少的内容。谢谢:-P

目录结构(CAPS中的文件夹):

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

我的webpack文件(测试底部的字体):

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" }]
  }
}

1 个答案:

答案 0 :(得分:0)

我从未需要测试中的所有正则表达式。

我的一个webpack文件示例:

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]' }
  ]
},