React webpack dev server 可以工作，但是当我创建 prod bundle 时出现引用错误 "require is not defined"

Question

我是运行一个 React 项目，使用本地开发服务器进行测试没有问题，但是一旦我进行生产 webpack 构建并在浏览器中加载页面，我就会出现白屏并进入控制台我看到一条错误消息 "Uncaught ReferenceError: require is not defined"。当我查看特定的 javascript 时，它从 require("url") 开始，但我的任何 javascript 源文件中都没有任何 require("url")，所以它必须来自一个模块。

这是控制台抛出错误时指向的部分（尽我所能清理）

function(e,t){e.exports=require("url")},function(e,t,n){"use 
strict";Object.defineProperty(t,"__esModule",
{value:!0}),t.default=function(e){var t=[];return 
Object.keys(e).forEach(function(n){return 
t.push(e[n])}),t}},function(e,t,n){"use strict";function a(e){return 
Object.prototype.toString.call(e).slice(8,-1)}function r(e)
{return"Number"===a(e)&&!isNaN(e)&&e>0}function o(e){return 
e.isRequired=function(t,n,a){if(void 0===t[n])return new Error("The 
prop "+n+" is marked as required in \n      "+a+", but its value is 
undefined.");e(t,n,a)},e}Object.defineProperty(t,"__esModule",
{value:!0}),t.falseOrElement=t.falseOrNumber=void 
0,t.typeOf=a,t.isValidDelay=r;var 
i=n(0);t.falseOrNumber=o(function(e,t,n){var 
a=e[t];return!1===a||r(a)?null:new Error(n+" expect "+t+" \n      to 
be a valid Number > 0 or equal to false. "+a+" 
given.")}),t.falseOrElement=o(function(e,t,n){var 
a=e[t];return!1===a||(0,i.isValidElement)(a)?null:new Error(n+" 
expect "+t+" \n      to be a valid react element or equal to false. 
"+a+" given.")})}

这是我的 webpack base/prod 配置：

//BASE CONFIG

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
  context: __dirname,
  target: 'node',

  entry: './assets/js/index',

 output: {
  path: path.resolve('./assets/bundles/'),
  publicPath: '/static/bundles/',
  filename: "[name]-[hash].js"
},

 plugins: [
  new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),
], // add all common plugins here

module: {
    rules: [
       /* {
          enforce: "pre",
          test: /\.js$/,
          loader: "eslint-loader",
          exclude: /node_modules/
        },*/
        {test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ['babel-loader'],

        }, { test: /\.(scss|css)$/,
              loaders: ["style-loader", "css-loader", "sass-loader"]
        }, {
            test: /\.(jpg|png|gif)$/,
            loaders: ['url-loader?limit=25000']
        },
           {
            test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
            loader: 'file-loader?name=public/fonts/[name].[ext]'
        },

    ],
},

resolve: {
    //tells webpack where to look for modules
    modules:  [path.resolve(__dirname, "app"), "node_modules"],
    //extensions that should be used to resolve modules
    extensions: ['.js', '.jsx']
}
}

//PROD CONFIG
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var config = require('./webconfig.base.js')

config.output.path = require('path').resolve('./assets/bundles')
config.plugins = config.plugins.concat([

new BundleTracker({filename: './webpack-stats-prod.json'}),

  // removes a lot of debugging code in React
  new webpack.DefinePlugin({
   'process.env': {
  'NODE_ENV': JSON.stringify('production')
  }}),

  // keeps hashes consistent between compilations
  new webpack.optimize.OccurrenceOrderPlugin(),

  // minifies your code
  new webpack.optimize.UglifyJsPlugin({
  minimize: true,
    compressor: {
     warnings: false
    }
  })
])

module.exports = config

Answer 1

使用 target: 'web'（或什么都不用），而不是 target: node

React webpack dev server 可以工作，但是当我创建 prod bundle 时出现引用错误 "require is not defined"

React webpack dev server works but when I create prod bundle I get reference error "require is not defined"

javascript

reactjs

webpack

webpack-2