node.js - 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。

Answer 1

如果你的 bundle 中仍然有一个 require，这意味着一些 ES6 文件还没有被 Babel 转译。

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

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

此外，您可以在所有文件树状结构中搜索“require('crypto')”吗？

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