webpack (스타일러스 사용)을 사용하여 사용자 정의 webfont 처리

Question

첫 번째로 webpack을 처음 사용하기 때문에이 기능이 처음 사용되었습니다.

내 webpack 응용 프로그램에 간단한 webfont를 포함 시키려고하지만 내 페이지에서이를 볼 때 어려움이 있습니다.

내 아키텍처는 다음과 같습니다 : I는 "HEINEKEN"정의를 포함하려고 무엇을

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

여기가있다 :

|-- 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에 대한 stylus-loader, 두 style-loader 및 css-loader를 사용 글꼴 (기존 file-loader) :

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

번들링 할 때 모든 것이 잘 보입니다. 글꼴 파일은 제대로 소비되고 최종 번들의 일부이지만 내 글꼴은 HTML에 적용되지 않으며 이유를 볼 수 없습니다.

웹팩 항목 파일 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 .. dunno를 사용하고 있습니다.

미리 감사드립니다. :)

[편집] 여기 내 전체 설정은 다음과 같습니다

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은 스타일 시트 자체의 기본 URL이며 스타일이 지정된 소스 문서의 기본 URL은 아닙니다.

- 우리의 경우 스타일 로더에서 CSS Values and Units Module Level 3

는 blob 객체에 스타일을 추가하고이 같은 <link> 태그를 통해 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 
}