Javascript 导入字体库时出现的网页包问题

我正在构建一个React应用程序，该应用程序将需要导入font awesome CSS，但我收到一个错误消息，该模块无法解析woff2文件

下面是我的代码：

import React from 'react';
import ReactDOM from 'react-dom';

require('css!../node_modules/bootstrap/dist/css/bootstrap.css')
require('css!../node_modules/font-awesome/css/font-awesome.css')

import '../node_modules/bootstrap/dist/js/bootstrap.js'

import Dashboard from './components/Dashboard/Dashboard';

ReactDOM.render(
  <Dashboard/>,
  document.getElementById('react-container')
);

和我的

webpack.config.js

文件：

var path = require('path');

module.exports = {
    entry: "./client/app.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js",
        publicPath: "/dist"
    },
    module: {
        loaders: [
            {
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            },
        ],
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader']
            },
            {
                test: /images\/.*\.(png|jpg|svg|gif)$/,
                loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
            },
            {
                test: /fonts\/.*\.(woff|woff2|eot|ttf|svg)$/,
                loader: 'file-loader?name="[name]-[hash].[ext]"',
            }
        ]
    },
    watch: true
}

---

感谢您帮助解决此问题。

我认为您的

/font\/.\。（woff | woff2 | eot | ttf | svg）$/

无法与

/font/fontawesome webfont.woff2？v=4.7.0

匹配。字体文件路径的结尾是

？v4.7.0

。尝试删除

$

您需要删除

？v=4.7.0

您可以看到当前正则表达式与结尾部分不匹配

？v=4.7.0

。因此，您可以删除该结束部分，也可以修改正则表达式以允许在结束时使用它

/fonts\/.*\.(woff|woff2|eot|ttf|svg)?(\?v=[0-9]\.[0-9]\.[0-9])?$

上面的正则表达式将允许最后的版本

或者，您也可以这样编写上面的正则表达式

/fonts\/.*\.(woff(2)?|eot|ttf|svg)?(\?v=[0-9]\.[0-9]\.[0-9])?$

---

来自的

webpack.config.js

的此配置解决了以下问题：

var config = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style!css?sourceMap'
    }, {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/octet-stream"
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file"
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=image/svg+xml"
    }]
  }
};

module.exports = config;

---

我既没有在代码中指定v4.7.0，也没有包含v4.7.0的文件。我不知道v.4.7.0从何而来，这就是问题所在。删除$没有任何区别。我既没有在代码中指定v4.7.0，也没有包含v4.7.0的文件。我不知道v.4.7.0是从哪里来的。解决方案无效。很高兴您找到了解决方案，感谢分享：）

var config = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style!css?sourceMap'
    }, {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/octet-stream"
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file"
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=image/svg+xml"
    }]
  }
};

module.exports = config;