Webpack，require 不是函数答案

【问题标题】：Webpack, require is not a functionWebpack，require 不是函数
【发布时间】：2023-03-13 01:45:01
【问题描述】：

运行我的 webpack 构建的 React 应用时出错 - 错误如下：

webpack-internal:///1495:3
var crypto = require('crypto');
             ^

TypeError: require is not a function
    at eval (webpack-internal:///1495:3:14)
    at Object.<anonymous> (/path/to/project/build/main.js:9739:1)
    at __webpack_require__ (/path/to/project/build/main.js:21:30)
    at eval (webpack-internal:///1494:1:20)
    at Object.<anonymous> (/path/to/project/build/main.js:9733:1)
    at __webpack_require__ (/path/to/project/build/main.js:21:30)
    at eval (webpack-internal:///692:8:18)
    at Object.<anonymous> (/path/to/project/build/main.js:4515:1)
    at __webpack_require__ (/path/to/project/build/main.js:21:30)
    at eval (webpack-internal:///1491:12:23)

我不知道这个错误来自哪个模块。我正在通过以下命令运行我的项目：

NODE_ENV=development nodemon --watch build/ build/main.js

这是我的 webpack 配置：

const path = require('path')
const fs = require('fs')
const webpack = require('webpack')

const webpackConfig = {
  context: path.join(__dirname, '..'),
  entry: ['babel-polyfill', path.join(__dirname, '../src/entry.js')],
  target: 'node',
  output: {
    path: path.resolve(__dirname, '../build'),
    publicPath: '/',
    libraryTarget: 'commonjs2',
    filename: 'main.js'
  },
  resolve: {
    modules: [
      path.join(__dirname, '../src'),
      path.join(__dirname, '../server'),
      'node_modules'
    ],
    extensions: ['.js', '.jsx', '.json']
  },
 module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.(png|gif|jpe?g|ico|eot|svg|ttf|woff2?)$/,
        loader: 'file-loader',
        options: {
          context: 'src/app/assets/',
          outputPath: 'dist/',
          name: '[path][name].[ext]?[hash]',
          //limit: 10000
        }
      }
    ]
  },
  node: {
    net: 'empty',
    tls: 'empty',
    dns: 'empty',
    fs: 'empty',
    mysql: 'empty',
    __dirname: true
  },
  plugins: [
    // hot reload new webpack.HotModuleReplacementPlugin(),
    new webpack.IgnorePlugin(/webpack-stats\.json$/),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
        API_HOST: JSON.stringify(process.env.API_HOST),
        API_PORT: JSON.stringify(process.env.API_PORT)
      },
    }),

  ],
  externals: ['mysql', 'bindings']
}

if (process.env.NODE_ENV ===  'development') {
  webpackConfig.devtool = 'eval-source-map'
}

module.exports = webpackConfig

正在使用此命令构建文件：

./node_modules/.bin/webpack --display-error-details --config webpack/webpack.config.js

我使用的 webpack 版本是 3.0.0。

【问题讨论】：

你为什么用nodemon运行应用程序？
你会推荐什么？我可以使用 webpack-dev-server 运行它，但我不完全确定它对我的项目是否必要。无论如何，问题似乎出在构建文件中。如果我错了，请纠正我 - 我不会说我是这里的初学者，但也绝不是专家。
使用webpack-dev-server 在开发中运行代码始终是比使用自定义代码更好的选择。在我的项目中，我只对要在生产中使用的代码使用webpack 命令。另外，main.js 是如何工作的，你可以使用 webpack 构建它，然后使用 nodemon 运行它，你是在服务器上使用它吗，比如 express？
@MarkoGrešak 好的，谢谢，老实说，从来没有考虑过。是的，它是一个 React 应用程序和相关的后端，每个都运行 Express 服务器。在某些时候，它们将被拆分为单独的项目，但现在它工作正常。
如果 react 应用程序与后端分离（如果可能，您应该这样做），webpack-dev-server 可能是您可以在开发中使用的最佳选择。它是一个静态服务器，它将使用相同的 webpack 配置自动重新编译您的文件，因此您可以确保您在开发中使用的代码将在生产中运行相同的代码，减去环境特定条件（如果有）。

标签： node.js webpack

【解决方案1】：

如果你的包里还有require，这意味着一些ES6文件没有被Babel转译。

我可以看到您从babel-loader 中排除了node_modules...

您能否尝试删除排除项，看看是否更好？

另外，你能在所有文件树状结构中搜索“require('crypto')”吗？

最后，你说它是一个 React 应用程序，但 babel-loader 只编译 .js 文件，而不是 .jsx... 你可以尝试将加载程序的 test 更改为 /\.jsx?$/ 吗？

【讨论】：