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__ ，確保可以使用！