与Webpack的ReactJS:未捕获的ReferenceError:需求未定义

以下是我的webpack.config.js。 在浏览器开发工具中,获取“Uncaught ReferenceError:require is not defined”

如果我删除“目标”:“节点”,然后错误“未捕获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; 

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

如果你正在为浏览器做代码,那么你无法使用节点fs.readFileSync ,你不应该使用target: 'node'

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

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

如果您正尝试在浏览器中使用其他文件,则可以:

需要构build文件

这将使用require将index.js文件的数据永久地发送到例如。 这是完全可以接受的,如果内容是一些configuration,不会改变每个用户,例如语言文件等。这种方法可以增加您的资产文件,并命中加载速度,如果文件的内容很大。

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

AJAX的内容

使用Ajax /获取您可以调用页面加载文件的内容。 如果这个文件是为每个访问者独特的,那么你将需要这样做。