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

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

当我运行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字体和上面的一些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#=&.]+)?$/,

webpack与icomoon不起作用

2 个答案: