webpack с icomoon не работает

T попытаться скомпилировать сгенерированные шрифты с помощью icomoon с webpack, но со следующей конфигурацией webpack не выполняется. Я использую URL-загрузчик и файл-загрузчик для создания вывода, но тест не удается в концеwebpack с icomoon не работает

var webpack = require('webpack'), 
    autoprefixer = require('autoprefixer'), 
    OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'), 
    ExtractTextPlugin = require('extract-text-webpack-plugin'), 
    path = require('path'); 



const sassLoaders = [ 
    'css-loader!autoprefixer-loader?browsers=last 2 version', 
    'postcss-loader', 
    'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, '.') 
] 

const config = { 
    entry: { 

     app: ['./js/app'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.css$/i, 
       loader: ExtractTextPlugin.extract("css-loader!autoprefixer-loader") 
      }, 
      { 
       test: /\.sass$/, 
       loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!')) 
      }, 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract('css!sass') 
      }, 

      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }, 
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/icon-woff" } 
     ] 
    }, 
    output: { 
     filename: '[name].js', 
     path: path.join(__dirname, './build'), 
     publicPath: '/bundles/build/' 
    }, 
    amd: {jQuery: true}, 
    plugins: [ 
     new ExtractTextPlugin('[name].css'), 
     //new OptimizeCssAssetsPlugin(), 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery" 
     }), 
     new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity) 
    ], 
    postcss: [ 
     autoprefixer({ 
      browsers: ['last 2 versions'] 
     }) 
    ], 
    resolve: { 
     alias: { 
      jquery: 'node_modules/jquery/dist/jquery.js', 
      magnificPopup: 'node_modules/maginific-popup/dist/jquery.magnific-popup.js' //JQuery Plugin 
     }, 

     modulesDirectories: ['./js', 'node_modules'], 
     extensions: ['', '.js', '.sass'], 
     root: [path.join(__dirname, './')] 
    } 
} 

module.exports = config;

добавить шрифт, как показано здесь

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

так жалуется becuase суффиксов я удаляю суффиксы получать компилируется, но не шрифт показывает

когда я бегу weppack -w я получаю

ERROR in ./fonts/icomoon.ttf?9ht85s 
Module parse failed: fonts\icomoon.ttf?9ht85s Unexpected character 
' ' (1:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character ' ' (1:0)

источник

2016-07-08 deroccha

Вы нашли решение? Я столкнулся с той же проблемой – Finrod

Просто нашел решение :)

Ваше регулярное выражение не соответствует шрифту url вашего @font-face. Так что это еще один загрузчик, который пытается разобрать ваши файлы шрифтов.

Изменение загрузчика с этим регулярным выражением, он должен работать:

{ 
    test: /\.woff(2)?(\?[a-z0-9]+)?$/, 
    loader: "url-loader?limit=10000&mimetype=application/font-woff" 
}, { 
    test: /\.(ttf|eot|svg)(\?[a-z0-9]+)?$/, 
    loader: "file-loader" 
}

источник

2016-07-11 14:51:56 Finrod

, спасибо, что это отлично работает, теперь мне нужно как-то комбинировать регулярное выражение, чтобы соответствовать шрифту awsome icons, а также – deroccha

Это не работает для меня –

Не работает для меня. – gandra404

@Finrod дал хороший ответ, но файл URI должен соответствовать регулярное выражение для того, чтобы файл для обработки правила.

В качестве примера использования шрифтов IcoMoon, и некоторые из URI, выше не работают, потому что блок шрифта лицо выглядит следующим образом:

@font-face { 
    font-family: 'connectlab'; 
    src: url("../fonts/icomoon.eot?9ht85s"); 
    src: url("../fonts/icomoon.eot?9ht85s#iefix") format('embedded-opentype'), 
    url("../fonts/icomoon.ttf?9ht85s") format('truetype'), 
    url("../fonts/icomoon.woff?9ht85s") format('woff'), 
    url("../fonts/icomoon.svg?9ht85s#icomoon") format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

Обратите внимание, что регулярное выражение указано выше подведет на все пути, содержащие a #

// fail 
test: /\.(ttf|eot|svg)?(\?[a-z0-9]+)?$/ 

// better ?? 
test: /\.(ttf|eot|svg)?(\?[a-z0-9#=&.]+)?$/,

источник

2017-08-03 12:53:24 vogomatix

webpack с icomoon не работает

ответ

Смежные вопросы