Webpack，require不是一个函数。

Question

运行我使用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。

- Tom Oakley

---

你为什么要用 nodemon 运行这个应用程序？ - Marko Gresak

你会推荐什么替代方案吗？我可以使用webpack-dev-server运行它，但我不确定这对我的项目是否必要。问题似乎在构建文件中。如果我错了，请纠正我 - 我不会说我是一个初学者，但也绝不是专家。 - Tom Oakley

使用webpack-dev-server在开发中运行代码总是比使用自定义代码更好的选择。在我的项目中，我只使用webpack命令来编译用于生产的代码。另外，main.js如何工作，你可以使用webpack构建它，然后使用nodemon运行它，你是否将其与服务器（例如express）一起使用？ - Marko Gresak

@MarkoGrešak 好的谢谢，老实说我从未想过这个问题。是的，它是一个React应用程序和相关后端，每个都运行Express服务器。在某个时候，它们会被拆分成单独的项目，但现在它们可以正常工作。 - Tom Oakley

如果 React 应用程序与后端分离（如果可能的话），则在开发中使用 webpack-dev-server 可能是最好的选择。它是一个静态服务器，将使用相同的 webpack 配置自动重新编译您的文件，因此您可以确保您在开发中使用的代码在生产中运行方式相同（除了环境特定条件，如果有的话）。 - Marko Gresak

可能是在React代码中导入superagent出错的重复问题。 - aryzing

Answer 1

如果您的捆绑包中仍然有require，这意味着某些ES6文件未经Babel转译。

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

您能否尝试删除排除并查看是否有所改善？

此外，您可以在所有文件层级中搜索“ require（'crypto'）”吗？

最后，您说这是一个React应用程序，但babel-loader仅转换.js文件，而不是.jsx... 您能否尝试将加载器的test更改为/\.jsx?$/？

- Jalil