javascript - webpack 未加载我的字体文件

标签 javascript node.js fonts webpack

正如之前发生在许多其他人身上的情况一样,webpack 根本没有将我的任何字体加载到构建中。我查看了开发板,搜索了 google,尝试了许多不同的正则表达式技巧,并尝试了其他技术,例如 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" }]
  }
}

最佳答案

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

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

关于javascript - webpack 未加载我的字体文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41884053/

相关文章:

javascript - 保存到 cookie 的简单隐藏/显示常见问题解答

javascript - ejs模板数据未插入到mongodb中

fonts - 适用于 azure 1.50 的 PDFSharp 私有(private)字体

css - 字体在不同的缩放和显示尺寸下显示不正确

android - 在 Photoshop 文件中,字体大小是 20px,在 android 中,sp 是什么?是一样的吗?是指 20px= 20sp 还是其他?

javascript - 表行上的多个模态

javascript - 在 React Native 中使用 d3 自定义图表

javascript - 用 Ajax 响应替换 DOM 节点

javascript - LearnYouNode - 杂耍异步

javascript - 我想记忆一下 readline 。怎么做?