Gérer le webfont personnalisé avec webpack (en utilisant le stylet)

Question

D'abord, s'il vous plaît noter que je suis nouveau à webpack et ceci est mon premier projet avec lui. J'essaie d'inclure une simple webfont dans mon application webpack, mais j'ai du mal à la voir sur ma page.

Mon l'architecture ressemble à ceci:

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

J'utilise le stylus-loader, et les deux style-loader et css-loader pour mon CSS:

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

et voici ce que j'ai essayé d'inclure la coutume "HEINEKEN" polices (avec le file-loader classique):

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

Lors du regroupement, tout semble bien paraître. Les fichiers de polices sont correctement consommés et font partie de l'ensemble final, mais mes polices ne s'appliquent pas au HTML, et je ne vois pas pourquoi.

Le fichier d'entrée webpack est index.js:

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

Voici le ./styles/index.styl:

@import '_fonts'; 

html 
    font-family 'Heineken Core', serif 

... et le ./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; 
} 

J'ai vérifié le chemin des polices , c'est correct. Je suppose que le problème est ailleurs, mais n'arrive pas à trouver ce qui se passe.

Une aide?

Remarque: J'utilise webpack-dev-server .. dunno si cela peut causer un problème.

D'avance, merci! :)

[EDIT] Voici ma pleine 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

La question vient de la façon qui gère les CSS chemins relatifs:

URL relatives sont résolus à des URL complètes en utilisant une URL de base . RFC 3986, section 3, définit l'algorithme normatif pour ce processus. Pour les feuilles de style CSS, l'URL de base est celle de la feuille de style elle-même, et non celle du document source stylé.

- CSS Values and Units Module Level 3

Dans notre cas le style chargeur ajoute styles blob objets et injectent à DOM via <link> tag comme ceci:

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

URL relatives dans notre CSS résolvez l'utilisation de ces blobs en tant que base, pas l'hôte à partir duquel index.html a été chargé. Et attendu que rien n'a été trouvé à ces endroits.

La solution de ce problème est d'utiliser des URL absolues dans les références CSS, ce qui peut être fait facilement avec l'option output.publicPath dans la configuration webpack:

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