带有icomoon的webpack不起作用

尝试用webpack通过icomoon编译生成的字体，但下面的webpack配置不会执行。我使用的URL装载机和文件加载器来生成输出，但测试都是在最后失败带有icomoon的webpack不起作用

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

这样抱怨监守后缀，我去掉后缀越来越编译但没有字体显示

当我运行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

刚刚找到解决方案:)

您的正则表达式不匹配您的@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图标以及 – 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; 
}

需要注意的是上面指定的正则表达式将在失败的所有包含＃

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

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

来源

2017-08-03 12:53:24 vogomatix

带有icomoon的webpack不起作用

回答

相关问题