Html 使用webpack处理自定义webfont（使用手写笔）

首先，请注意，我是一个新的网页，这是我的第一个项目与它

我试图在我的网页包应用程序中包含一个简单的webfont，但在我的页面上很难看到它

我的架构如下所示：

|-- app
|  |-- images
|  |  `-- icons
|  |-- index.html
|  |-- index.js
|  |-- scripts
|  `-- styles
|     |-- fonts
|     |  |-- HEINEKEN Core.eot
|     |  |-- HEINEKEN Core.otf
|     |  |-- HEINEKEN Core.svg
|     |  |-- HEINEKEN Core.ttf
|     |  |-- HEINEKEN Core.woff
|     |-- index.styl
|     |-- _fonts.styl
|-- package.json
|-- README.md
`-- webpack.config.js

我使用

手写笔加载器

，我的css使用

样式加载器

和

css加载器

：

{
  test: /\.styl$/,
  exclude: /node_modules/,
  loader: [
            'style-loader',
            'css-loader' + (!production ? '?sourceMap' : ''),
            'postcss-loader',
            'stylus-loader'
          ].join('!')
}

下面是我尝试使用的“喜力”定制字体（使用经典的

文件加载器
）：

捆绑时，一切看起来都很好。字体文件被正确使用，并且是最终捆绑包的一部分，但是我的字体不适用于HTML，我不明白为什么

网页包条目文件是
index.js
：

import './index.html';
import './styles/index.styl';

这是
/styles/index.styl
：

@import '_fonts';

html
  font-family 'Heineken Core', serif

@font-face {
  font-family: 'Heineken Core';
  src: url('./fonts/HEINEKEN Core.eot');
  src: url('./fonts/HEINEKEN Core.eot?#iefix') format('embedded-opentype'),
       url('./fonts/HEINEKEN Core.woff') format('woff'),
       url('./fonts/HEINEKEN Core.ttf') format('truetype'),
       url('./fonts/HEINEKEN Core.svg#HEINEKENCore') format('svg');
  font-weight: normal;
  font-style: normal;
}

。。。以及
/styles/_font.styl
：

@import '_fonts';

html
  font-family 'Heineken Core', serif

@font-face {
  font-family: 'Heineken Core';
  src: url('./fonts/HEINEKEN Core.eot');
  src: url('./fonts/HEINEKEN Core.eot?#iefix') format('embedded-opentype'),
       url('./fonts/HEINEKEN Core.woff') format('woff'),
       url('./fonts/HEINEKEN Core.ttf') format('truetype'),
       url('./fonts/HEINEKEN Core.svg#HEINEKENCore') format('svg');
  font-weight: normal;
  font-style: normal;
}

我已经检查了字体路径，它是正确的。我想问题出在别的地方，但我无法找到到底发生了什么

有什么帮助吗

注意：我使用的是
webpack dev server
。。不知道它是否会引起问题

提前，谢谢！：）

[编辑]这是我的完整配置：

const path              = require('path');
const webpack           = require('webpack');
const autoprefixer      = require('autoprefixer');

const production        = process.argv.indexOf("--production") > -1;

// Full Webpack Guide :
// https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.olmn099wa
// and :
// https://julienrenaux.fr/2015/03/30/introduction-to-webpack-with-practical-examples/

var config = {
  entry: {
    vendor: ['jquery', 'jqvmap', 'gsap'],
    app: './app/index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: !production ? 'http://localhost:8080/' : undefined,
    filename: 'bundle.js'
  },
  watch: !production,
  debug: !production,

  module: {
    preLoaders: [
      {
        test: /\.(js|es6)$/,
        exclude: /node_modules/,
        loader: 'jshint-loader'
      }
    ],
    loaders: [
      {
        test: /\.(js|es6)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets:[/*'react',*/'es2015'] } // Loader's options
      },
      {
        test: /\.styl$/,
        exclude: /node_modules/,
        loader: [
                  'style-loader',
                  'css-loader' + (!production ? '?sourceMap' : ''), // https://github.com/webpack/style-loader#recommended-configuration
                  'postcss-loader',
                  'stylus-loader'
                  // 'file-loader?name=[path][name].[ext]&context=app/'
                ].join('!')
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        exclude: /node_modules/,
        loader: 'file-loader?name=[path][name].[ext]&context=app/'
      },
      {
        test: /\.jpg$/,
        loader: 'file-loader?name=[path][name].[ext]&context=app/'
      },
      {
        test: /\.(png|gif)$/,
        loader: 'file-loader?name=[path][name].[ext]&context=app/' // 'url-loader?name=[path][name].[ext]&limit=150000' // filesize of < 150ko will be included as data URL
      },
      {
        test: /\.html$/,
        loader: [
                  'file-loader?name=[path][name].[ext]&context=app',
                  'extract-loader',
                  'html-loader'
                ].join('!')
      },

      // https://65535th.com/jquery-plugins-and-webpack/
      // https://github.com/webpack/expose-loader
      {
        test: require.resolve("jquery"),
        loader: [
                  'expose-loader?$',
                  'expose-loader?jQuery'
                ].join('!')
      }
    ]
  },

  resolve: {
    extensions: ['', '.js', '.es6'],

    //http://stackoverflow.com/a/28989476/1187888
    // alias: {
    //   jQuery: './node_modules/jquery/dist/jquery.js'
    // }
  },

  plugins: [
    // http://stackoverflow.com/a/28989476/1187888
    /*new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),*/

    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"/*, Infinity*/)
  ],

  // http://stackoverflow.com/a/33384364/1187888
  devServer: {
    contentBase: "./app",
    hot: true
  },

  // https://github.com/postcss/autoprefixer#webpack
  postcss: [ autoprefixer({ browsers: ['last 5 versions'] }) ],

  jshint: { 'esversion' : 6 }
};


// Empêche UglifyJS de gueuler sur le bundle de prod
// ---
if (production) {
  // http://stackoverflow.com/a/34071566/1187888
  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      exclude: /node_modules/
    })
  );
}


module.exports = config;

const path=require（'path'）；
const webpack=require（'webpack'）；
const autoprefixer=require（'autoprefixer'）；
const production=process.argv.indexOf（“--production”）>-1；
//完整网页指南：
// https://medium.com/@dabit3/初学者指南至网页包-b1f1a3638460#olmn099wa
//以及：
// https://julienrenaux.fr/2015/03/30/introduction-to-webpack-with-practical-examples/
变量配置={
条目：{
供应商：['jquery'，'jqvmap'，'gsap']，
app:“./app/index.js”
},
输出：{
path:path.join（uu dirname，'dist'），
公共路径：！生产http://localhost:8080/“：未定义，
文件名：“bundle.js”
},
手表：！生产，
调试：！生产，
模块：{
预紧器：[
{
测试：/\（js|es6）$/，
排除：/node_模块/，
加载程序：“jshint加载程序”
}
],
装载机：[
{
测试：/\（js|es6）$/，
排除：/node_模块/，
加载器：“巴别塔加载器”，
查询：{presets:[/*'react'，*/'es2015']}//加载程序的选项
},
{
测试：/\.styl$/,，
排除：/node_模块/，
加载器：[
“样式加载器”，
“css加载器”+（！production？“？sourceMap”：“”）//https://github.com/webpack/style-loader#recommended-配置
'邮政编码加载器'，
“手写笔装入器”
//'文件加载器？名称=[path][name].[ext]&上下文=应用/'
].join（“！”）
},
{
测试：/\（eot | svg | ttf | woff | woff2）$/，
排除：/node_模块/，
加载器：“文件加载器？名称=[path][name]。[ext]&上下文=app/”
},
{
测试：/\.jpg$/,，
加载器：“文件加载器？名称=[path][name]。[ext]&上下文=app/”
},
{
测试：/\（png | gif）$/，
加载器：“文件加载器？名称=[path][name]。[ext]&上下文=app/'/'url加载器？名称=[path][name]。[ext]&限制=150000'//文件大小<150ko将作为数据url包含
},
{
测试：/\.html$/,，
加载器：[
'文件加载器？名称=[path][name].[ext]&上下文=应用'，
“提取加载程序”，
“html加载程序”
].join（“！”）
},
// https://65535th.com/jquery-plugins-and-webpack/
// https://github.com/webpack/expose-loader
{
测试：require.resolve（“jquery”），
加载器：[
“公开加载程序？$”，
'公开加载程序？jQuery'
].join（“！”）
}
]
},
决心：{
扩展名：[''，'.js'，'.es6']，
//http://stackoverflow.com/a/28989476/1187888
//别名：{
//jQuery:“./node_modules/jQuery/dist/jQuery.js”
// }
},
插件：[
// http://stackoverflow.com/a/28989476/1187888
/*新的webpack.ProvidePlugin({
$：“jquery”，
jQuery：“jQuery”
}),*/
新建webpack.optimize.commonChunkPlugin（/*chunkName=*/“vendor”、/*filename=*/“vendor.bundle.js”/*，Infinity*/）
],
// http://stackoverflow.com/a/33384364/1187888
开发服务器：{
contentBase:“./应用程序”，
热：是的
},
// https://github.com/postcss/autoprefixer#webpack
postcss:[autoprefixer（{browsers:['last 5 versions']}]），
jshint:{'esversion'：6}
};
//产品捆绑线的丑陋环境
// ---
if（生产）{
// http://stackoverflow.com/a/34071566/1187888
config.plugins.push(
新建webpack.optimize.UglifyJsPlugin({
压缩：{
警告：错误
},
排除：/node\u模块/
})
);
}
module.exports=config；
问题来自CSS处理相对路径的方式：

相对URL使用基本URL解析为完整URL。RFC 3986第3节定义了该过程的标准算法。对于CSS样式表，基本URL是样式表本身的URL，而不是样式化源文档的URL

-

在我们的例子中，样式加载器向对象添加样式，并通过
标记将其注入DOM，如下所示：

 <link rel="stylesheet" href="blob:http://localhost:8080/4f0dcf58-1e22-46b5-bc74-60c97c1ad923">

显示您的完整配置将非常有帮助。嗨，肖恩，谢谢阅读我。我已经用我的完整配置编辑了原始帖子。事实上，我的配置的
publicPath
中已经有了这个三元组，但这是为了找到解决方案。原因中的行是.woff |.eot的以下加载程序。。。文件：
loader:'file loader？name=[path][name].[ext]&context=app/'
，我刚刚在
loader:'file loader'
中重写了它。这解决了我的问题。谢谢你给我指明了正确的方向：）嗯，奇怪的行为，可能是由于文件加载程序或加载程序UTIL中的某些错误造成的。无论如何，我很高兴问题得到了解决，我怀疑WebpackDevServer是我最初问题的原因。虽然我在屏幕上看不到我的字体，但我注意到CSS包确实包含