React + Webpack 不解析文件加载器
Posted
技术标签:
【中文标题】React + Webpack 不解析文件加载器【英文标题】：React + Webpack don't resolve file loaders 【发布时间】：2020-05-13 02:06:51 【问题描述】：我试图将一个典型的 html 站点迁移到一个“轻量级”的 React 应用程序。因此，我安装了没有create-react-app 的 React。
我配置了 Webpack，然后 file-loader 使用 CSS 文件中的字体。但是我在编译时仍然会出错，因为它无法识别文件加载器（我也尝试过ttf-loader 和url-loader）。
我一直在阅读类似的问题，但他们的解决方案都不适用于这种情况。
项目的目录结构如下：
webpack.config.js 源 index.js CSS style.css 字体 pgroofrunners.ttf这是我当前的 Webpack 配置（webpack.config.js）：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports =
entry: path.resolve(__dirname, 'src/index'),
output:
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
,
module:
rules: [
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
use: ['babel-loader']
,
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
loader: 'file-loader',
options:
name: '[name].[ext]',
outputPath: 'fonts/'
]
]
,
devServer:
contentBase: path.resolve(__dirname, 'dist'),
port: 9000
,
plugins: [
new HtmlWebpackPlugin(
template: "src/index.html"
)
]
;
所以，当我运行 webpack-dev-server --mode development 时，它会编译但随后会崩溃并出现以下错误：
我猜这是导致 **src/css/style.css* 中的应用程序崩溃的原因：
@font-face
font-family: pgRoofRunners;
src: url("../fonts/pgroofrunners.ttf");
我该如何解决这个问题？
【问题讨论】：
你需要一个style loader 【参考方案1】：看起来您正在使用 webpack 在某处导入 CSS。为了理解 CSS，webpack 也需要一个加载器。通常你的 module.rules 中有这样的东西：
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
或者，如果你不使用MiniCssExtractorPlugin：
test: /\.css$/,
use: ['style-loader', 'css-loader']
【讨论】：
【参考方案2】：我用 url-loader 代替了 file-loader（需要安装）。
test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000'
【讨论】：
以上是关于React + Webpack 不解析文件加载器的主要内容，如果未能解决你的问题，请参考以下文章
React Webpack - 错误：模块不是加载器（必须具有正常或俯仰功能）
React / Webpack - “模块解析失败：意外令牌 - 您可能需要适当的加载程序来处理此文件类型。”