为什么我的 "webpack": "^5.70.0" 无法处理 jpg 文件?
Why my "webpack": "^5.70.0" is not able to process jpg file?
我正在尝试在我的应用程序主页上加载一个 jpg 文件:
import cad from './CAD/untitled.106.jpg'
但不断弹出以下错误:
assets by status 2 MiB [cached] 1 asset
cached modules 2.41 MiB (javascript) 937 bytes (rjavascript modules 420 KiB
./src/components/HomePage.js 1.18 KiB [built]
./src/components/CAD/untitled.106.jpg 419 KiB [
(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
(Source code omitted for this binary file)
@ ./src/components/HomePage.js 7:0-41
@ ./src/components/App.js 3:0-34 12:90-98
@ ./src/index.js 1:0-35
webpack 5.70.0 compiled with 1 error in 84 ms
我尝试通过添加 'file-loader' 规则来修改 webpack.config.js。然而,问题依然存在。目前,我正在使用“webpack”:“^5.70.0”。这是我的 webpack.config.js:
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.(jpeg|png|jpg|svg|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
}
}
],
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("development"),
},
}),
],
};
我尝试了很多不同的方法和解决方案,我不知道为什么我的 webpack.config.js 不能处理 jpg 文件。有人能告诉我这个问题的根本原因吗?非常感谢。
在 webpack 5+ 中,您可以将其加载为 asset/resource
asset/resource emits a separate file and exports the URL. Previously achievable by using file-loader.
所以它应该是这样的:
{
test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i,
type: 'asset/resource',
},
我正在尝试在我的应用程序主页上加载一个 jpg 文件:
import cad from './CAD/untitled.106.jpg'
但不断弹出以下错误:
assets by status 2 MiB [cached] 1 asset
cached modules 2.41 MiB (javascript) 937 bytes (rjavascript modules 420 KiB
./src/components/HomePage.js 1.18 KiB [built]
./src/components/CAD/untitled.106.jpg 419 KiB [
(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
(Source code omitted for this binary file)
@ ./src/components/HomePage.js 7:0-41
@ ./src/components/App.js 3:0-34 12:90-98
@ ./src/index.js 1:0-35
webpack 5.70.0 compiled with 1 error in 84 ms
我尝试通过添加 'file-loader' 规则来修改 webpack.config.js。然而,问题依然存在。目前,我正在使用“webpack”:“^5.70.0”。这是我的 webpack.config.js:
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.(jpeg|png|jpg|svg|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
}
}
],
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("development"),
},
}),
],
};
我尝试了很多不同的方法和解决方案,我不知道为什么我的 webpack.config.js 不能处理 jpg 文件。有人能告诉我这个问题的根本原因吗?非常感谢。
在 webpack 5+ 中,您可以将其加载为 asset/resource
asset/resource emits a separate file and exports the URL. Previously achievable by using file-loader.
所以它应该是这样的:
{
test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i,
type: 'asset/resource',
},