Question

下面是我的webpack.config.js。在浏览器开发人员工具中，获取“Uncaught ReferenceError：require is not defined”

如果我删除“target”：“node”，则抛出错误“Uncaught TypeError：fs.readFileSync不是函数”。

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;

Answer 1

您需要来自节点的本机模块并尝试在浏览器中使用它。在这种情况下，您需要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();

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

需要构建文件

例如，这将使用require使用index.js文件永久传送文件的数据。如果内容是某些配置并且每个用户没有更改，这是完全可以接受的，示例是语言文件等。如果文件中的内容很大，此方法可以增加资产文件并达到第一次加载速度。

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

AJAX内容

使用Ajax / Fetch你可以在页面加载时调用文件的内容。如果这个文件对每个访问者来说都是唯一的，那么你需要这样做。

ReactJS与Webpack：Uncaught ReferenceError：require未定义

1 个答案: