Webpack和在同构包中使用节点模块

Question

我正在构建一个同构包，其中在各种文件中使用一个标志来检测我们是在浏览器中还是在节点中。 如果在节点中，我需要一个内部软件包，即if (isNode) { require("/.nodeStuff) }拥有fs模块作为其依赖项之一。但是，由于明显的原因，webpack不喜欢这样做。我可以配置为忽略基于节点的基于模块的webpack配置文件完全需要它，以便不会发生这种情况？

Answer 1

第一选择

如文档中所述，为了解决这个同构问题，您可以简单地运行两个构建，每个构建一个（环境和节点）。 该指南可在此处找到。 请记住，您可能应该通过添加以下块node: { fs: 'empty',//any other node lib used }模拟clientConfig中的任何内置插件node: { fs: 'empty',//any other node lib used } 。 这样，Webpack将不会抱怨，并且由于您的客户端代码将处于!IS_NODE条件下，因此永远不会使用空的fs 。

尽管这是一个可靠的解决方案，但是您最终得到了2个捆绑包，您当然需要一种每次都将它们分发到正确平台的方法。

第二种方式

此解决方案基于不太知名的__non_webpack_require__函数。 这是特定于Webpack的功能，它将指示解析器避免捆绑正在请求的该模块，并假定全局require函数可用。 这正是在节点而不是浏览器中运行时发生的情况。

//webpack.config.js

{
    mode: "development",
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    node: false
}

// nodeStuff.js

const fs = __non_webpack_require__('fs'); //this will be transformed to require('fs')

fs.writeFileSync('some','thing)

因为这样的话nodeStuff.js将只在需要IS_NODE条件，本地require将可用。

我建议仅在本机库上使用__non_webpack_require__ ，确保可以使用！