[英]React + Webpack don't resolve file loaders
I was trying to migrate a typical HTML site to a "light" React app.我试图将典型的 HTML 站点迁移到“轻量级”React 应用程序。 Therefore, I have installed React without
create-react-app
.因此,我在没有
create-react-app
情况下安装了 React。
I configured Webpack and then file-loader to use fonts in the CSS files.我配置了 Webpack,然后配置了文件加载器以在 CSS 文件中使用字体。 But I am still getting errors when compiling because it does not recognize the file loaders (I also tried ttf-loader and url-loader ).
但是我在编译时仍然遇到错误,因为它无法识别文件加载器(我也尝试过ttf-loader和url-loader )。
I have been reading similar questions but neither of their solutions works on this case.我一直在阅读类似的问题,但他们的解决方案都不适用于这种情况。
The project's directory structure looks like this:项目的目录结构如下所示:
This is my current Webpack configuration (webpack.config.js):这是我当前的 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"
})
]
};
So, when I run webpack-dev-server --mode development
it compiles but then crashes with the following errors:因此,当我运行
webpack-dev-server --mode development
它会编译但随后崩溃并出现以下错误:
C:\Web\pwa-static2>yarn serve yarn run v1.17.3 $ webpack-dev-server --mode development i 「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: 77bf7ce09014ddcd0764 Version: webpack 4.41.5 Time: 3901ms Built 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 modules ERROR in ./src/css/style.css 1:0 Module 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-25 Child 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*:我想这就是 **src/css/style.css* 中的应用程序崩溃的原因:
@font-face {
font-family: pgRoofRunners;
src: url("../fonts/pgroofrunners.ttf");
}
How can I solve this?我该如何解决这个问题?
我没有使用文件加载器,而是使用了 url-loader(需要安装)。
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
It looks like you are importing the CSS somewhere with webpack.看起来您正在使用 webpack 将 CSS 导入某处。 In order to understand CSS, webpack needs a loader for that as well.
为了理解 CSS,webpack 也需要一个加载器。 Usually you have something like this in your module.rules:
通常你的module.rules中有这样的东西:
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
or, if you don't use MiniCssExtractorPlugin
:或者,如果您不使用
MiniCssExtractorPlugin
:
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.