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

Question

我正在做一个项目。我被困在一个 webpack 错误上。我只想从节点模块中包含 walletconnect 模块。所以你可以在我的 webpack.confg 文件中看到。问题是我从未使用过 webpack，不幸的是，如果没有 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:\Users\AHMED\AppData\Roaming\npm-cache\_logs\2021-01-11T18_43_05_567Z-debug.log

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

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 的开头