模块解析失败：woff、woff2和ttf文件中出现意外字符的webpack问题。

Question

我有一个 webpack.config.js 文件，并在单独的模块块中为每种字体类型添加了加载器，但当我运行 yarn start 时，

Webpack 成功编译并在终端上显示了这些详细信息。

  f4769f9bdb7466be65088239c12046d1.eot    20.1 kB          [emitted]         
448c34a56d699c29117adc64c43affeb.woff2      18 kB          [emitted]         
 fa2772327f55d8198301fdb8bcfc8158.woff    23.4 kB          [emitted]         
  e18bbf611f2a2e43afc071aa2f4e1512.ttf    45.4 kB          [emitted]         
  89889688147bd7575d6327160d64e760.svg     109 kB          [emitted]         
                             bundle.js    1.56 MB       0  [emitted]  [big]  main
                           favicon.ico    1.15 kB          [emitted]         
                            index.html  605 bytes          [emitted]  

网页在浏览器中打开，应用了Bootstrap CSS，但控制台中出现多个woff、woff2和ttf文件错误（请参见图像）。

模块解析失败：意外字符''（1:4）
您可能需要一个适当的加载器来处理此文件类型。
（源代码对于该二进制文件被省略）

package.json

"dependencies": {
    "bootstrap": "^3.3.7",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "history": "^4.7.2",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "path": "^0.12.7",
    "postcss-loader": "^2.0.8",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-redux-form": "^1.16.0",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "style-loader": "^0.19.0",
    "svg-inline-loader": "^0.8.0",
    "uglifyjs-webpack-plugin": "^1.0.1",
    "url-loader": "^0.6.2",
    "webpack-combine-loaders": "^2.0.3"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.2",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "eslint": "^4.10.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-flowtype": "^2.39.1",
    "eslint-plugin-html": "^3.2.2",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  }

webpack.config.js

const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // eslint-disable-line
const path = require('path');
const combineLoaders = require('webpack-combine-loaders');

const BUILD_DIR = path.resolve(__dirname, 'build');
const APP_DIR = path.resolve(__dirname, 'src');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    favicon: './src/assets/favicon.ico',
    inject: 'body'
});
// const extractPluginConfig = new ExtractTextPlugin({filename:'style.css', disable: false, allChunks: true});
module.exports = {
    context: __dirname,
    entry: [
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        APP_DIR + '/index.jsx',
    ],
    output: {
        publicPath: '/',
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
                test: /\.jsx?/,
                loader: 'babel-loader',
                include: path.join(__dirname, 'src'),
                exclude: /(node_modules|bower_components)/,
                query: { presets: ["env", "react"] }
            },
            {
                test: /\.css$/,
                // exclude: /node_modules/,
                loader: 'style-loader!css-loader?importLoaders=1'
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')
            },
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!postcss-loader!less-loader'
            },
            {
                test: /\.json$/,
                loader: 'json'
            },
            {
                test: /\.png$/,
                loader: "url-loader",
                query: {
                    limit: 100000
                }
            },
            {
                test: /\.jpg$/,
                loader: "url-loader"
            },
            {
                test: /\.svg(\?.*)?$/,
                loader: "url-loader",
                query: {
                    limit: 10000,
                    mimetype: 'image/svg+xml'
                }
            },
            {
                test: /\.(woff2?)(\?.*)?$/,
                loader: "url-loader",
                query: {
                    limit: 10000,
                    mimetype: 'application/font-woff'
                }
            },
            {
                test: /\.(ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                query: {
                    limit: 10000,
                    mimetype: 'application/octet-stream'
                }
            },
            {
                test: /\.eot(\?.*)?$/,
                loader: 'file-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css', '.less', '.json']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
            }
        }),
        // new UglifyJsPlugin(), for production server only
        HtmlWebpackPluginConfig
    ],
    devServer: {
        historyApiFallback: true,
        hot: true
    }
}

index.jsx

 import 'bootstrap/dist/css/bootstrap.css'

我尝试了各种替代上述模块的加载器，来自于GitHub解决方案，但它们都没有起作用，可以看到以下实验。

实验1（使用文件加载器）：

    { 
      test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/, 
      loader: 'file-loader?name=[path][name].[ext]?[hash]' 
    }

试用2（使用URL加载器）

    { 
       test: /\.(woff(2)?|eot|ttf|otf)(\?[a-z0-9]+)?$/, 
       loader: 'url-loader?limit=100000' 
    }

试用 3（使用较低限制的 URL 加载器）

        {
            test: /\.(woff2?|ttf|eot|svg|png|jpe?g|gif)(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url-loader?limit=8192'
        },

- diEcho

Answer 1

在Webpack 4中，你需要：

{
 test: /\.(woff|woff2|ttf|eot)$/,
 use: 'file-loader?name=fonts/[name].[ext]!static'
}

例如使用file-loader。

- Joshua Holden

Answer 2

这是我的字体配置：

{
    test: /\.(woff|woff2|ttf|eot)$/,
    use: 'file?name=fonts/[name].[ext]!static'
}

maybe is useful

--- added ---

resolve: {
    extensions: ['.js', '.jsx', '.css', '.less', '.json'],
    modules: ['node_modules', 'path/to/your/static_resource']
}

- tobeyouth

---

@pro.mean 也许你可以在resolve中设置模块，就像这个答案中所添加的那样。 - tobeyouth

我的静态文件夹中没有任何字体，但这是由于bootstrap.css中使用了glyphicon字体，因为我直接从node_modules导入了它。 - xkeshav

哇，它像魔法一样好用。只需在 resolve 块中添加 modules: ['node_modules']。谢谢。顺便问一下，query: {name: 'fonts/[name].[ext]'} 的含义是什么？我没有看到任何字体在这个路径上。 - xkeshav

@pro.mean 的 glyphicon 字体是在 node_modules/bootstrap/dist 中构建的，只需设置 node_modules 即可工作 :) - tobeyouth

Answer 3

我在正在工作的项目中安装了一个Vue插件，但是遇到了这个错误。

我尝试按照说明进行操作，但不确定它们是否过时。我分享我的解决方案。在webpack.config.js文件中，我添加了以下设置：

module: {
  rules: [
... --> other existing rules 
  {
    test: /\.(woff|woff2|ttf|eot)$/,
    loader: 'file-loader',
    options: {
      name: 'fonts/[name].[ext]!static'
    },
    include: /node_modules/
  }
 ]
}

- Miguel Real

Answer 4

我正在使用vue cli webpack，以下代码解决了错误

{
  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
  loader: 'file-loader?name=assets/[name].[hash].[ext]'
}

- Edsel Ayala

Answer 5

我正在做React/Redux，也遇到了这个错误。 我在我的webpack.config.dev.js文件中添加了这一行来解决问题：

module: {
  loaders: [
    ...,
    {test: /\.png$/, loader: 'file'} // Line added
  ]
}

然后在我的 R/R 代码中，我使用 import (ES6) 来引用图像。然后我执行：

<img src={myPNGImage} .../>

- Daniel C. Deng

Answer 6

在Magento2的PWA工作室中，

您可以在webPackConfig.js中添加以下行：

config.module.rules.push({ test: /\.(woff|woff2|ttf|eot)$/, use: 'file-loader' });

这应该可以完成工作。

- Aditya Yadav

Answer 7

被接受的答案对我有用，但是自从 webpack 4 以来，答案需要稍微更新一下，使用 file-loader 而不仅仅是 file，例如：

{
   test: /\.(woff|woff2|ttf|eot)$/,
   use: 'file-loader?name=fonts/[name].[ext]!static'
}

- Jake Ferrante