webpack5-解析的请求是一个模块

Question

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

发布快照

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

文件夹结构文件夹结构

webpack.config.js

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

package.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。。。