Загрузочные шрифты веб-загрузчика url-loader

Я использую webpack для объединения моего приложения Angular2, включая изображения / sass и шрифты. Я использую gulp с webpack / webpackstream и webpack-dev-server для обслуживания либо сервера разработки, либо создания сборки. Все работает нормально, за исключением того, что я не могу заставить работать шрифты при создании сборки.

Ниже вы увидите часть конфигурации веб-пакета, gulpfile, css-файл и мою структуру папок.

Всякий раз, когда я использую webpack-dev-server, я вижу на вкладке сети, что шрифт был правильно загружен ([hash] .woff) из / assets / fonts /

Когда я запускаю сборку, шрифты не создаются в ./dist/assets/fonts, и я получаю сообщение об ошибке консоли (Не удалось загрузить ресурс: file: ///%path%/dist/assets/fonts/e13dca925b232dd96ae6bc48b7b7264b.woff net :: ERR_FILE_NOT_FOUND)

Мне пока не повезло с Google или даже с stackoverflow, надеюсь, кто-то знает, что я делаю не так.

Огромное спасибо заранее.

Конфигурация веб-пакета

entry: {
    styles: "./client/sass/main",
    scripts: "./client/app/main",
    polyfills: [
        "./node_modules/es6-shim/es6-shim",
        "./node_modules/angular2/bundles/angular2-polyfills"
    ]
},
module: {
    loaders: [
        {
            test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
        },
        {
            test: /\.scss$/,
            loaders: ['style', 'css', 'postcss', 'sass']
        },
        {
            test: /\.html$/,
            loader: "html"
        },
        {
            test: [/\.png$/,/\.jpg$/,/\.jpeg$/],
            loader: "url-loader?mimetype=image/png"
        },
        {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,   loader: "url-loader?limit=10000&mimetype=application/font-woff&name=./assets/fonts/[hash].[ext]"
        },
        {
            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,  loader: "url-loader?limit=10000&mimetype=application/font-woff&name=./assets/fonts/[hash].[ext]"
        },
        {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url-loader?limit=10000&mimetype=application/octet-stream&name=./assets/fonts/[hash].[ext]"
        },
        {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: "file-loader"
        },
        {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: "url-loader?limit=10000&mimetype=image/svg+xml&name=./assets/fonts/[hash].[ext]"
        }
    ]
},

main.scss

@font-face {
    font-family:'senticosansdtlight';
    src: url('../assets/fonts/senticosansdt-light-webfont.eot');
    src: url('../assets/fonts/senticosansdt-light-webfont.eot?#iefix')     format('embedded-opentype'),
    url('../assets/fonts/senticosansdt-light-webfont.woff') format('woff'),
    url('../assets/fonts/senticosansdt-light-webfont.ttf') format('truetype'),
    url('../assets/fonts/senticosansdt-light-webfont.svg#senticosansdtlight') format('svg');
    font-weight: normal;
    font-style: normal;
 }

Gulpfile

// Webpack:build creates the bundles that are specified in  webpack.prod.js
gulp.task("webpack:build", function() {
return gulp.src('')
    .pipe(webpackStream(require('./webpack.prod.js')))
    .pipe(gulp.dest('./dist'));});

//webpack dev server
gulp.task("webpack-dev-server", function(callback) {
new WebpackDevServer(webpack(webpackConfig), {
    stats: {
        colors: true
    },
    contentBase: config.src.base
}).listen(8080, "localhost", function(err) {
    if(err) throw new gutil.PluginError("webpack-dev-server", err);
    gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
});
});

Структура папки

dist/
client/
     app/
          main.js
     assets/
          fonts/
     sass/
          main.scss

person Geo    schedule 21.04.2016    source источник
comment
Не совсем уверен, но в своей настройке я копирую папку с ресурсами с помощью raw-loader. Это сработало бы для вас?   -  person Mathijs Segers    schedule 21.04.2016
comment
Укажите параметр context в конфигурации вашего веб-пакета.   -  person Bob Sponge    schedule 21.04.2016
comment
к сожалению, указание контекста также не сработало   -  person Geo    schedule 21.04.2016
comment
В ваших сгенерированных файлах css путь file:///%path%/dist/assets...?   -  person Bob Sponge    schedule 21.04.2016
comment
@GMolenaar Удалось ли вам найти решение? У меня есть связанная проблема: stackoverflow.com/questions/36926521/   -  person Jay    schedule 29.04.2016


Ответы (1)


Используйте /assets/fonts/[nameght.[ext] вместо /assets/fonts/[hash provided.[ext]).

person Rhonin    schedule 11.07.2017