与webpack的ReactJS：未捕获引用错误：未定义请求

ReactJS with Webpack: Uncaught ReferenceError: require is not defined(与webpack的ReactJS：未捕获引用错误：未定义请求)

问题描述

下面是我的webpack.config.js。在浏览器开发工具中，获取"未定义未捕获的ReferenceError：Required"

如果我删除"Target"："node"，则会抛出错误"unauture TypeError：fs.readFileSync is Not a Function"。

var config = {
   entry: './main.js',

   output: {
      filename: './index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },
  node: {
    fs: "empty"
  },

   module: {
      loaders: [
         {
            test: /.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
  target: 'node'
}
module.exports = config;

推荐答案

您需要来自节点的本机模块，并尝试在浏览器中使用它。在这种情况下，您需要fs。

如果为浏览器编写代码，则无法使用节点fs.readFileSync，也不应使用target: 'node'

我可以使用以下main.js文件重新创建您的问题。

const fs = require('fs');

const test = function () {
    console.log('this is a test');
    var contents = fs.readFileSync('DATA', 'utf8');
}

test();

如果您尝试在浏览器中使用其他文件，则您可以：

生成时需要该文件

这将永久地将文件的数据与您的index.js文件一起发送，例如使用require。如果内容是一些配置并且不会因用户而改变，这是完全可以接受的，例如语言文件等。如果文件上的内容很大，这种方法可以增加您的资产文件并提高首次加载速度。

const data = require('some-data.json`)
console.log(data) // would output the JSON

AJAX内容

使用ajax/fetch可以在页面加载时调用文件的内容。如果此文件对每个访问者都是唯一的，则您需要执行此操作。

这篇关于与webpack的ReactJS：未捕获引用错误：未定义请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！