webpack 需要動態路徑

Question

我的同事在我們的代碼中放了這樣的東西：

const information = require('../relative/path/' + tag + '.json');

有趣的是它有效，我真的不知道如何。

我創建了這個最小的項目：

$ head *.json main.js 
==> 1.json <==
["message #1"]

==> 2.json <==
["message two"]

==> 3.json <==
["message III"]

==> package.json <==
{
  "dependencies": {
    "webpack": "^5.38.1"
    "webpack-cli": "^4.7.2"
  }
}

==> package-lock.json <==
...
==> main.js <==
const arg = process.argv[2] ? process.argv[2] : 1;

console.log(require(`./${arg}.json`)[0]);

當我運行原始程序時，我得到了這個：

$ node main.js 1
message #1
$ node main.js 2
message two
$ node main.js 3
message III

所以現在我用 webpack 編譯

$ node_modules/.bin/webpack ./main.js

它創建了一個包含單個文件的dist目錄，並且該新捆綁程序也可以工作：

$ node dist/main.js 1
message #1
$ node dist/main.js 2
message two
$ node dist/main.js 3
message III

當我查看捆綁包內部時，所有信息都捆綁在一起：

當我從程序中刪除 require 並打印 arg 時，捆綁的程序是一行。

那么它是如何做到的呢？

• 以某種方式計算每個可能的文件？
• 只包括當前目錄下的所有內容？

有趣的是，在我的簡單示例中， package.json也出現在其中，但在真正給我這個想法的例子中，它沒有。

有人知道這是如何工作的嗎？

我的意思是對我來說簡單實用的答案是，永遠不要將變量放入require中......但我仍然很好奇。

PS真正的是一個web項目。 僅使用 node 和 args 作為示例

Answer 1

Webpack 總是將所有require的文件捆綁到最終的 output 文件中（默認情況下稱為bundle.js ）。 您不能require任何未捆綁的東西。

正如您所指出的，如果您需要一些不是常數的東西，則可能會導致一些麻煩。 這就是為什么eslint有一個no-dynamic-require規則。 但是，如果您知道自己在做什么，那么一切都很好。

Webpack 使用一些啟發式方法來支持require的非構建時間常數值（即表達式）。 確切的行為記錄在webpack 的依賴管理文檔中。

如該鏈接中所述，您的require('../relative/path/' + tag + '.json')將導致 webpack 確定：

• 目錄： ../relative/path /path
• 正則表達式： /^.*\.json$/ .json$/

並將捆綁所有符合該標准的文件。

當您的require調用被執行時，它將提供與它完全匹配的文件，或者如果該文件未捆綁，則拋出錯誤。

重要提示：當然，這意味着您無法在捆綁后添加文件。 在捆綁之前，您必須將文件放在正確的位置，以便 webpack 可以找到、添加並最終解決它們。

另請注意，通常情況下，您不需要編寫自己的 webpack 實驗。 Webpack有大量官方樣品。 例如， 此官方 webpack 示例准確說明了您的案例。