Webpack 無法解析文件加載器js文件

Question

我不斷收到此錯誤Can't resolve 'file-loader'

我正在運行 webpack 服務命令。 我嘗試了不同的正則表達式，但它總是顯示相同的錯誤。 如果這可能與 React 文件的放置方式有關，請告訴我。

package.json

{
  "name": "Tick",
  "version": "1.0.0",
  "description": "Productivity app",
  "main": "src/server/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "nodemon src/server/app.js",
    "dev": "webpack serve",
    "build": "webpack"
  },
  "author": "Gabriel Gamboa",
  "license": "ISC",
  "dependencies": {
    "cross-env": "^7.0.3",
    "express": "^4.17.1",
    "nodemon": "^2.0.13",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.54.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.3.0"
  }
}

Webpack 配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.join(__dirname, "src", "client", "index.js"),
  mode: 'development',
  output: {
    path:path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }]
      },
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: ['file-loader'],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "client", "index.html"),
    }),
  ],
}

請幫助我已經嘗試了一切

Answer 1

您需要安裝它，因為它沒有作為依賴項列在您的package.json文件中。

npm i file-loader -D