Webpack，要求不是功能

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

如果你的包中仍然有require，则意味着某些 ES6 文件尚未被 Babel 转译。

我可以看到你排除node_modules在babel-loader...

您可以尝试删除排除项，看看是否会更好？

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

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