React webpack dev server 可以工作,但是当我创建 prod 包时,我收到参考错误“require is not defined”

免费啤酒明天

我正在运行一个 react 项目并且在本地开发服务器上测试没有问题,但是一旦我构建了生产 webpack 并在浏览器中加载页面,我就会看到一个白屏,并且在控制台中我看到一条错误消息“Uncaught ReferenceError :没有定义要求”。当我查看特定的 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
兰特

使用target: 'web'(或不使用),而不是target: node

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章