如何在webpack.config.js文件中包含节点模块

Question

我目前在试图将walletconnect模块包含在我的项目中时，遇到了一个webpack问题。由于我以前没有使用过webpack，我无法自行解决此问题。时间是至关重要的，因为我今晚需要完成这个项目。如果您能帮助我解决此错误，我将不胜感激。运行'npm-run-dev'命令后，在下面的回溯中显示了此错误。：

ERROR in ./frontend/src/components/App.js 14:11
Module parse failed: Unexpected token (14:11)
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
|   }
|   render() {
>     return <button>Click Me</button>;
|   }
| }
@ ./frontend/src/index.js 1:0-34
webpack 5.12.3 compiled with 1 error in 155 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-webpack-project@1.0.0 dev: `webpack --mode development --entry ./frontend/src/index.js --output-path ./static/frontend/main.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-webpack-project@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersAHMEDAppDataRoamingnpm-cache_logs2021-01-11T18_43_05_567Z-debug.log

正如我告诉你的，我只想添加walletconnect功能，为此我需要使用节点模块中的walletconnection模块。

webpack.config.js

var webpack = require('webpack');
module.exports = {
module:{
rules:[
{
test:/.js$/,
exclude:/node_modules/,
include: [/node_modules/@walletconnect/],

// target: 'node'
use:{
loader:"babel-loader"
},

}
],

},
resolve: {
alias: {
'crypto': false,
'buffer': false,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],

}

webpack.json

{
"name": "my-webpack-project",
"version": "1.0.0",
"description": "My webpack project",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --entry ./frontend/src/index.js --output-path ./static/frontend/main.js",
"build": "webpack"
},
"repository": {
"type": "git",
"url": "git+https://github.com/AhmedYasin487/Dotescrow.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/AhmedYasin487/Dotescrow/issues"
},
"homepage": "https://github.com/AhmedYasin487/Dotescrow#readme",
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@webpack-cli/init": "^1.1.1",
"babel-loader": "^8.2.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"css-loader": "^5.0.1",
"react-native": "^0.63.4",
"react-native-walletconnect": "0.0.1-alpha.2",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.1",
"ts-loader": "^8.0.14",
"typescript": "^4.1.3",
"webpack": "^5.12.3",
"webpack-cli": "^4.3.1"
},
"dependencies": {
"@walletconnect/client": "^1.3.3",
"npm": "^6.14.11",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"rn-nodeify": "^10.2.0"
}
}

babelrc

{
"presets":["@babel/preset-env","@babel/preset-react","@walletconnect"],
"plugins":["transform-class-properties"]
}

app.js

import React , { Component } from 'react';
import ReactDOM from 'react-dom'
import WalletConnect from "@walletconnect/client";
class App extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Click happened');
}
render() {
return <button>Click Me</button>;
}
}
ReactDOM.render(<App />,document.getElementById('app'));

如果需要更多细节，请在评论中告诉我，我会用这些信息更新我的回答，谢谢！

Answer 1

您有一个参考错误(未定义webpack(

尝试再次安装程序包

1. 从项目中删除node_modules
2. 运行npm install
3. 运行npm install webpack
4. 再次尝试npm run dev

也尝试添加此行

const webpack = require('webpack'); //to access built-in plugins

在webpack.config.js 的第一个