gpt4 book ai didi

javascript - React + Webpack 不解析文件加载器

转载 作者:行者123 更新时间:2023-12-01 00:13:18 25 4
gpt4 key购买 nike

我试图将一个典型的 HTML 网站迁移到一个“轻型”React 应用程序。因此,我安装了 React,但没有使用 create-react-app

我配置了Webpack,然后file-loader在 CSS 文件中使用字体。但编译时我仍然遇到错误,因为它无法识别文件加载器(我也尝试过 ttf-loaderurl-loader )。

我一直在阅读类似的问题,但他们的解决方案都不适用于这种情况。

项目的目录结构如下所示:

  • webpack.config.js
  • 源代码
    • index.js
    • CSS
      • 样式.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 --modedevelopment 时,它会编译,但随后崩溃并出现以下错误:

C:\Web\pwa-static2>yarn serveyarn run v1.17.3$ webpack-dev-server --mode developmenti 「wds」: Project is running at http://localhost:9000/i 「wds」: webpack output is served from /i 「wds」: Content not from webpack is served from C:\Web\app1\dist× 「wdm」: Hash: 77bf7ce09014ddcd0764Version: webpack 4.41.5Time: 3901msBuilt at: 2020-01-27 13:35:42     Asset      Size  Chunks             Chunk Names bundle.js  1.43 MiB    main  [emitted]  main       index.html  2.75 KiB          [emitted]  Entrypoint main = bundle.js[0] multi (webpack)-dev-server/client?http://localhost:9000 ./src/index 40 bytes {main} [built][./node_modules/ansi-html/index.js] 4.16 KiB {main} [built][./node_modules/react-dom/index.js] 1.33 KiB {main} [built][./node_modules/react/index.js] 190 bytes {main} [built][./node_modules/strip-ansi/index.js] 161 bytes {main} [built][./node_modules/webpack-dev-server/client/index.js?http://localhost:9000] (webpack)-dev-server/client?http://localhost:9000 4.29 KiB {main} [built]  [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built][./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built][./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]     [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built][./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built][./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built][./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built][./src/css/style.css] 335 bytes {main} [built] [failed] [1 error][./src/index.js] 207 bytes {main} [built]    + 30 hidden modulesERROR in ./src/css/style.css 1:0Module parse failed: Unexpected character '@' (1:0)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders> @font-face {|     font-family: pgRoofRunners;|     src: url("../fonts/pgroofrunners.ttf"); @ ./src/index.js 3:0-25Child html-webpack-plugin for "index.html":     1 asset    Entrypoint undefined = index.html    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 2.99 KiB {0} [built]    [./node_modules/lodash/lodash.js] 528 KiB {0} [built]    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]i 「wdm」: Failed to compile.

I guess this is what is crashing the app in **src/css/style.css*:

@font-face {
font-family: pgRoofRunners;
src: url("../fonts/pgroofrunners.ttf");
}

我该如何解决这个问题?

最佳答案

看起来您正在使用 webpack 将 CSS 导入到某个地方。为了理解 CSS,webpack 还需要一个加载器。通常你的 module.rules 中有这样的东西:

{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}

或者,如果您不使用MiniCssExtractorPlugin:

{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}

关于javascript - React + Webpack 不解析文件加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59935530/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com