webpack 5 - 解析的请求是一个模块

Question

我正在为一个小型应用程序创建 webpack5 设置，同时我面临着下面提到的问题。请建议解决方法

问题快照

Module not found: Error: Can't resolve 'faker' in 'C:\Gowtham\micro-frontend-training\products\src'      
resolve 'faker' in 'C:\Gowtham\micro-frontend-training\products\src'
  Parsed request is a module
  using description file: C:\Gowtham\micro-frontend-training\products\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\Gowtham\micro-frontend-training\products\src\node_modules doesn't exist or is not a directory
      looking for modules in C:\Gowtham\micro-frontend-training\products\node_modules
        single file module
          using description file: C:\Gowtham\micro-frontend-training\products\package.json (relative path: ./node_modules/faker)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Gowtham\micro-frontend-training\products\node_modules\faker is not a file
            .js

文件夹结构 文件夹结构

webpack.config.js

module.exports = {
  mode: "development",
};

包.json

{
  "name": "products",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "faker": "^6.6.6",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2"
  }
}

src/index.js

import faker from "faker";

let products = "";

for (let i = 0; i < 3; i++) {
  const name = faker.commerce.productName();
  products += `<div>${name}</div>`;
}

console.log(products);

Answer 1

尝试以下package.json...

{
    "name": "products",
    "version": "1.0.0",
    "description": "",
    "main": "dist/main.js",
    "scripts": {
      "prestart": "webpack",
      "start": "node ."
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
      "faker": "^5.5.3",
      "webpack": "^5.67.0",
      "webpack-cli": "^4.9.2"
    }
}

进行全新安装并运行npm start...