webpack（スタイラスを使用）でカスタムwebfontを扱います

Question

まず、webpackを初めて使用していることに注意してください。これは私の最初のプロジェクトです。

私はwebpackアプリケーションに単純な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 

私はstylus-loader、そして私のCSSの両方style-loaderとcss-loaderを使用します。

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

、ここでは、私が「ハイネケン」のカスタムを含めることを試みたものですフォント（従来のfile-loader）：

{ 
    test: /\.(eot|svg|ttf|woff|woff2)$/, 
    exclude: /node_modules/, 
    loader: 'file-loader?name=[path][name].[ext]&context=app/' 
} 

バンドルすると、すべてが見栄えのようです。フォントファイルは正しく消費され、最終的なバンドルに含まれますが、フォントはHTMLには適用されません。理由はわかりません。

WebPACKのエントリファイルがindex.jsです：

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

ここ./styles/index.stylだ：

@import '_fonts'; 

html 
    font-family 'Heineken Core', serif 

...と./styles/_fonts.styl：

@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を使用しています。

事前に、ありがとうございます！ :)

[EDIT]ここに私の完全な設定があります：

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; 

Answer 1

問題は、CSSが相対パスを処理する方法から来ている：

相対URLは、ベースURLを使用して完全なURLに解決されています。 RFC 3986、セクション3は、このプロセスのための規範的なアルゴリズムを定義します。 CSSスタイルシートの場合、ベースURLはスタイルシート自体のものであり、スタイル付けされたソース文書のものではありません。

- 我々の場合のスタイル-ローダーでCSS Values and Units Module Level 3

このよう<link>タグを介してblobオブジェクトにスタイルを追加し、DOMにそれを注入：私たちのCSSで

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

相対URLは、これらを使用して解決していますblobはベースであり、index.htmlがロードされたホストではありません。そして、これらの場所には何も見つかりませんでした。

module.exports = { 
    output: { 
    publicPath: (!production ? "http://localhost:8080/" : "http://your-production-host.com/") 
    }, 
    // rest of your config options 
}