在使用 webpack 进行前端项目构建时，有时会出现 ERROR in newmodule.js TypeError: native requires are not allowed 的错误提示。这个错误提示一般是由于使用了 Node.js 的原生模块，而 webpack 默认是不支持原生模块的。
那么，如何解决这个问题呢？下面我们来一步步了解。
什么是原生模块？
在 Node.js 中，原生模块是指由 Node.js 自带的模块，比如 fs、http、path 等。这些模块可以直接使用 require 方法引入，而不需要进行安装。
为什么 webpack 不支持原生模块？
webpack 的设计目标是将前端代码打包成浏览器可用的代码，因此它默认不支持 Node.js 的原生模块。这是因为浏览器环境与 Node.js 环境有很大的不同，浏览器不支持 Node.js 的原生模块，如果将这些模块打包进浏览器可用的代码中，会导致浏览器无法正常运行。
如何解决原生模块问题？
使用 webpack 的 node 属性
webpack 提供了一个 node 属性，可以用来配置哪些 Node.js 的全局变量和模块是可用的。通过在 webpack 配置文件中设置 node: { fs: 'empty' }，可以告诉 webpack 不要处理 fs 模块，避免出现 TypeError: native requires are not allowed 的错误。
// webpack.config.js
module.exports = {
// ...
node: {
fs: 'empty'
}
}使用第三方模块替代原生模块
如果项目中必须要使用原生模块，可以考虑使用第三方模块来替代。比如，可以使用 memfs 来替代 fs 模块，xhr2 来替代 http 模块等。
// 使用 memfs 替代 fs 模块
const { Volume, createFsFromVolume } = require('memfs')
const volume = new Volume()
const fs = createFsFromVolume(volume)使用插件
还可以使用插件来解决原生模块问题。比如，可以使用 webpack-node-externals 插件来排除 Node.js 的模块，避免出现 TypeError: native requires are not allowed 的错误。
-- -------------------- ---- ------- -- -- ---------------------- -- --- ------- ---------------------- ---------- -- ----------------- ----- ------------- - --------------------------------- -------------- - - -- --- ------- ------- ---------- ----------------- -
总结
在 webpack 构建时出现 ERROR in newmodule.js TypeError: native requires are not allowed 的错误提示，一般是由于使用了 Node.js 的原生模块，而 webpack 默认是不支持原生模块的。可以通过使用 webpack 的 node 属性、使用第三方模块替代原生模块、使用插件等方式来解决这个问题。在实际项目中，需要根据具体情况选择最合适的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66148febd10417a2224c9b98