Webpack与Icomoon不兼容。

Question

我尝试使用webpack编译icomoon生成的字体，但是以下webpack配置未被执行。我正在使用url-loader和file-loader生成输出，但测试在最后失败了。

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

因为文件后缀名的问题，我删除了后缀名进行编译，但没有字体显示。

运行 webpack -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)

- deroccha

---

你找到解决方案了吗？我也遇到了同样的问题。 - Finrod

Answer 1

刚刚找到解决方案 :)

你的正则表达式没有匹配到@font-face中字体的URL。因此，另一个加载器试图解析你的字体文件。

使用以下正则表达式替换你的加载器，应该就可以解决问题：

{
  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"
}

- Finrod

---

谢谢，这个现在运行良好。现在我必须将正则表达式组合起来，以匹配 Font Awesome 图标。 - deroccha

不要说“对我不起作用”，请检查正则表达式是否与您的字体文件URI匹配。例如，上面的正则表达式不包括#和?后面的其他字符。 - vogomatix

Answer 2

@Finrod给出了一个好的答案，但是文件URI必须与正则表达式匹配才能被规则处理。

例如，使用IcoMoon字体，上面的一些URI无法工作，因为font-face块如下所示：

@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#=&.]+)?$/, 

- vogomatix