性能问答>"webpack": "^5.70.0" 无法处理 jpg 文件>
2回复

"webpack": "^5.70.0" 无法处理 jpg 文件



最近尝试在应用上添加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 

我用带有“文件加载器”的规则来修改 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 文件。有大佬知道怎么解决吗?

156 阅读
请先登录,再评论

错误提示的是,缺少对应的loader,可以使用url-loader

1月前

可以将其加载为asset/resource,资产/资源发出一个单独的文件并导出 URL。以前可以通过使用文件加载器来实现。

所以它应该是这样的:

{
    test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i,
    type: 'asset/resource',
},

1月前