webpack打包後,__dirname獲取不到所在路徑

在用webpack打包node的後臺工程後,會出現通過__dirname獲取不到文件所i在路徑或者爲空字符串的情況,這時候只需要在webpack配置文件webpack.confg.js中將node字段設置成如下即可:

module.exports = {
	node: {
        __dirname: false
    }
}

爲什麼要這麼設置呢,可以查看webpack官網關於配置文件中node節點的介紹:
<以下爲官方文檔>


Node

這些選項可以配置是否 polyfill 或 mock 某些 Node.js 全局變量和模塊。這可以使最初爲 Node.js 環境編寫的代碼,在其他環境(如瀏覽器)中運行。

此功能由 webpack 內部的 NodeStuffPlugin插件提供。如果 target 是 “web”(默認)或 “webworker”,那麼NodeSourcePlugin 插件也會被激活。

node

object
是一個對象,其中每個屬性都是 Node.js 全局變量或模塊的名稱,每個 value 是以下其中之一……

  • true:提供 polyfill。
  • “mock”:提供 mock 實現預期接口,但功能很少或沒有。
  • “empty”:提供空對象。
  • false: 什麼都不提供。預期獲取此對象的代碼,可能會因爲獲取不到此對象,觸發 ReferenceError 而崩潰。嘗試使用require('modulename')導入模塊的代碼,可能會觸發Cannot find module "modulename"錯誤。

注意,不是每個 Node 全局變量都支持所有選項。對於不支持的鍵值組合(property-value combination),compiler 會拋出錯誤。更多細節請查看接下來的章節。
這裏是默認值:

node: {
  console: false,
  global: true,
  process: true,
  __filename: "mock",
  __dirname: "mock",
  Buffer: true,
  setImmediate: true
  
  // 更多選項,請查看“其他 Node.js 核心庫”
}

從 webpack 3.0.0 開始,node 選項可能被設置爲 false,以完全關閉 NodeStuffPluginNodeSourcePlugin 插件。

node.console
boolean | "mock"

默認值:false

瀏覽器提供一個 console 對象,具有非常類似 Node.js console 的接口,所以通常不需要 polyfill。

node.process
boolean | "mock"

默認值:true

node.global
boolean

默認值:true

關於此對象的準確行爲,請查看源碼。

node.__filename
boolean | "mock"

默認值:“mock”

選項:

  • true: 輸入文件的文件名,是相對於 context 選項。
  • false: 常規的 Node.js __filename 行爲。在 Node.js 環境中運行時,輸出文件的文件名。
  • “mock”: value 填充爲 “index.js”.

node.__dirname
boolean | "mock"

默認值:“mock”

選項:

  • true: 輸入文件的目錄名,是相對於 context 選項。
  • false: 常規的 Node.js __dirname 行爲。在 Node.js 環境中運行時,輸出文件的目錄名。
  • “mock”: value 填充爲 “/”。

node.Buffer
boolean | “mock”

默認值:true

node.setImmediate
boolean | “mock” | “empty”

默認值:true

其他 Node.js 核心庫(Node.js core libraries)
boolean | “mock” | “empty”

只有當 target 是未指定、“web” 或 “webworker” 這三種情況時,此選項纔會被激活(通過 NodeSourcePlugin)。

NodeSourcePlugin 插件啓用時,則會使用 node-libs-browser來對 Node.js 核心庫 polyfill。請查看 Node.js 核心庫及其 polyfills 列表。

默認情況下,如果有一個已知的 polyfill,webpack 會對每個 library 進行 polyfill,如果沒有,則 webpack 不會執行任何操作。在後一種情況下,如果模塊名稱配置爲 false 值,webpack 表現爲不會執行任何操作。

爲了導入內置的模塊,使用 non_webpack_require,例如,使用 non_webpack_require(‘modulename’) 而不是 require(‘modulename’)。
示例:

node: {
  dns: "mock",
  fs: "empty",
  path: true,
  url: false
}

參考webpack中文網:Node

發佈了70 篇原創文章 · 獲贊 15 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章