带有 icomoon 的 webpack 不起作用

Question

T 尝试用 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;
  }

所以抱怨后缀，我删除了编译后的后缀，但没有显示字体

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

Answer 1

刚刚找到解决方案:)

您的正则表达式与您的@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"
}

Answer 2

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

作为一个例子，使用IcoMoon字体，上面的一些URIs不起作用，因为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#=&.]+)?$/,