React Webpack开发服务器可以工作，但是当我创建产品包时，出现参考错误“ require is not defined”

Question

I am running a react project and have no problem testing with the local dev server, however as soon as I make a production webpack build and load the page in the browser I get a white screen and in console I see an error saying "Uncaught ReferenceError: require is not defined". When I look into the specific javascript it starts around require("url"), but I don't have any require("url") in any of my javascript source files, so it must be from a module.

Here is the part that the console points to when it throws the error (cleaned up as best as I can)

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.")})}

Here is my webpack base/prod config:

//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