Javascript 如何在网页中配置字体文件输出目录？

我刚安装了一个很棒的网页。我使用：

require（“font-awesome-webpack”）

我的网页包配置在我的模块加载程序阵列中包括以下内容：

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

问题是我在开发人员控制台中遇到此错误：

localhost/:1 GET http://localhost/mysite/app/db812d8a70a4e88e888744c1c9a27e89.woff2 
localhost/:1 GET http://localhost/mysite/app/a35720c2fed2c7f043bc7e4ffb45e073.woff 
localhost/:1 GET http://localhost/mysite/app/a3de2170e4e9df77161ea5d3f31b2668.ttf 404 (Not Found)

问题是，这些文件是在根目录（mysite目录中）创建的。我如何配置这些WOFF和ttf以使其在mysite/app目录中输出？
我最近想在webpack v1中使用font awesome，我已经安装了npm模块
font awesome
而不是
font awesome webpack

在执行以下操作之前，必须安装几个加载程序：

npm i css加载器文件加载器样式加载器url加载器

并在webpack.config.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"
    }]
  }

现在，如果您在
条目.js中包括：

require（'font-awesome/css/font-awesome.css'）

您通常可以在模板中使用字体：


这个要点帮助了我：
截至2016年2月，这似乎是webpack的一个常见问题，所以我希望这能提供一些帮助。如果将其添加到加载程序：
”&name=./path/[hash].[ext]'
，则指定在何处查找这些文件。例如：

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=./[hash].[ext]'
}

这会将正确的URL放置到生成的CSS文件中的字体

我建议在处理css/SCS以外的任何内容时使用此方法。希望这有帮助
 除了上述答案，我
我必须在输出中指定一个路径，以使其正常工作，从而指定托管位置，而不是将资源写入根路径：

output: {
     filename: "./bundle.js",
     path: “./client”
},
module: {
       loaders[
          {
              test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/octet-stream&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
              loader: "file?&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=image/svg+xml&name=./webpack-assets/[name]/[hash].[ext]"
            }   
  ]  // loaders
} // module 

这是我的情况，因为我的脚本路径如下：

    script(src='/javascripts/app.js')

因此，我必须将“&name./javascripts/[hash].[ext]”添加到所有字体文件中，如：

{
  test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
  test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
  test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/octet-stream&name=./javascripts/[hash].[ext]"
}, {
  test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
  loader: "file?name=./javascripts/[hash].[ext]"
}, {
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=image/svg+xml&name=./javascripts/[hash].[ext]"
}

这个模式帮助我
我在电脑上使用了
字体很棒的网页
，但在Mac电脑上无法使用。我想我的电脑还在为.woff2、.woff和.tiff抛出404，但是图标显示正确，所以我忽略了这个问题

但是，我的Mac电脑不会显示图标。在阅读这篇问答时，我尝试了很多东西。以下是导致我的解决方案的原因：

在我的页面上，我得到了404，看起来像下面的链接：
我进入浏览器，确认了404
我尝试转到（删除字体文件之前的额外路径），并且能够访问该文件
我修改了Paul的答案，删除了使文件请求相对的

例如，保罗建议：

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=./[hash].[ext]'
}

注意使用
/[hash].[ext]
的
&name
参数。我删除了开头的
，现在没有404（浏览器正确地从站点根目录请求文件）：

结论：如果您的入口点不在web根目录下，并且您能够访问web根目录下的字体文件，那么您可能只需要使用此名称配置来修复路径。
面临同样的问题

使用下面的语法修复了它

loader: "file?name=./fonts/[hash].[ext]"

fonts是目录名，请将其替换为您自己的目录名

例如：

{ 
  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
  loader: "url?name=/build/[hash].[ext]&limit=8192&mimetype=application/font-woff"
}

请注意，我在使用字体加载程序时遇到了类似的错误。
无论上述任何更改，目录都不会被正确设置

要更正此问题，可以将选项publicPath添加到输出：

output: { path: config.outputPath, filename: '[name].js', publicPath: '/assets/' },

文件夹/assets/将更改为实际存储字体的位置

希望这能有所帮助。
有人吗？这不是使用webpack的方式吗？我使用font awesome/webpack的方式不对吗？那么fontawesome webpack是不是有问题？这是oneNote，您还需要在
webpack.config.js
文件的
output
中设置
publicPath
，或者字体URL将与您的应用程序路径相关，它们将与
输出
路径
发生重大变化：在使用加载器时，不再允许省略“-loader”后缀。您需要指定“css加载器”而不是“css”，请参阅。这是新的网页。这帮了我的忙！非常感谢。这是我使用Webpack2的唯一解决方案。为什么对PNG使用URL加载器？
{ 
  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
  loader: "url?name=/build/[hash].[ext]&limit=8192&mimetype=application/font-woff"
}

output: { path: config.outputPath, filename: '[name].js', publicPath: '/assets/' },