Handle benutzerdefinierte Webfont mit Webpack (mit Stift)

Question

Erstens, bitte beachten Sie, dass ich neu bei Webpack bin und dies ist mein erstes Projekt damit.

Ich versuche, ein einfaches Webfont in meine Webpack-Anwendung aufzunehmen, habe aber Schwierigkeiten, es auf meiner Seite zu sehen.

Meine Architektur sieht wie folgt aus:

|-- 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 

ich die stylus-loader verwenden und sowohl style-loader und css-loader für meine CSS:

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

und hier ist das, was ich die "HEINEKEN" custom zu schließen versucht Fonts (mit dem Klassiker file-loader):

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

Beim Bündeln scheint alles gut zu sein. Schriftdateien werden ordnungsgemäß verarbeitet und sind Teil des endgültigen Bundles, aber meine Schriftarten werden nicht im HTML angewendet, und ich kann nicht sehen, warum.

Die webpack Eintrag Datei ist index.js:

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

Hier ist die ./styles/index.styl:

@import '_fonts'; 

html 
    font-family 'Heineken Core', serif 

... und die ./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; 
} 

ich die Schriftarten Pfad überprüft haben , es ist richtig. Ich schätze, das Problem ist woanders, aber ich finde nicht, was passiert.

Irgendwelche Hilfe?

Hinweis: Ich verwende webpack-dev-server .. weiß nicht, ob es ein Problem verursachen kann.

Im Voraus, danke! :)

[EDIT] Hier ist meine volles config:

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

Die Frage aus dem Weg kommt, dass CSS relative Pfade Griffe:

Relative URLs vollständigen URLs aufgelöst wird unter Verwendung einer Basis-URL . RFC 3986, Abschnitt 3, definiert den normativen Algorithmus für diesen Prozess. Bei CSS-Stylesheets ist die Basis-URL die des Stylesheets selbst, nicht die des formatierten Quelldokuments.

- CSS Values and Units Module Level 3

In unserem Fall Stil-loader fügt Stile blob Objekte und spritzt es DOM über <link> Tag wie folgt:

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

Relative URLs in unserem CSS aufgelöst diese mit Blobs als Basis, nicht Host, von dem index.html geladen wurde. Und erwartungsgemäß wurde an diesen Orten nichts gefunden.

Die Lösung dieses Problems ist absolute URLs in CSS Referenzen zu verwenden, was kann leicht mit der output.publicPath Option im webpack Config erfolgen:

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