有什么方法可以使用 webpack 在運行時加載資源？

Question

我有一個.json 文件，其中包含我想使用典型的導入/要求語法從另一個腳本文件中引用的配置內容。 目前我正在使用 webpack 來解決這些依賴關系並為我捆綁它們。 但是我想在運行時加載這個文件，並希望可能有某種類型的加載器可以在運行時為我解析和加載這個文件。 到目前為止，我還沒有找到完全符合我需求的東西。

例子：

var jQuery = require('jQuery');
var sol = require('some-other-lib');
var myConfig = require('/real/production/url/myconfig.json');

console.log(myConfig.myFavoriteSetting);

在上面的示例中，我希望在運行時解析並加載myconfig.json 。

可能相關的問題：

• 如何使用 webpack 在 js 文件中加載 CDN 或外部供應商 javascript 庫，而不是在 html 文件中
• Webpack - 動態需求和路徑
• 使用 webpack 在運行時動態要求 JS 文件

Answer 1

我認為你想要的是require.ensure ，webpack 的代碼拆分。 您“確保”的模塊被放入一個單獨的包中，當您的“確保”在運行時執行時，webpack 運行時會自動通過 ajax 獲取包。 請注意確保的回調語法——您的回調在包加載完成后運行。 此時您仍然需要 require 所需的模塊； .ensure 只是確保它們可用。

代碼拆分是 webpack 的主要功能之一，它允許您在任何給定時間僅加載您需要的內容。 還有插件等來優化多個捆綁包。

Answer 2

在 Webpack 2 中，您可以使用 System.import。 它使用 Promise API。 AFAIK，目前無法在瀏覽器中運行異步/等待代碼。 我相信 Babel 只能將 async/await 轉換為 ES2015，因此只有最新版本的 Node (v6.x) 才能運行它。 我認為瀏覽器還不能理解它，因為轉譯的代碼使用了生成器。

對於 System.import 請注意，一些較舊的瀏覽器（我相信 IE 11 及以下）將要求您對 Promise API 進行 polyfill。 查看 polyfill.io。

如果你真的想在瀏覽器中使用 async/await，你可以為 ES2015 做一個完整的 polyfill。

Answer 3

我有一個文件（config.json）的情況。

我決定用Copy-Webpack-Plugin復制它

new CopyWebpackPlugin([
    // Copy directory contents to {output}/
    { from: 'config.json' }
  ]) 

之后，我的文件位於輸出構建目錄中。 我使用 'externals' 屬性在我的 webpack.config 文件中引用我的文件：

  externals: {
    'config': "require('./config.json')"
  }

在我加載 config.json 的 js 文件中：

import config from 'config'

'config' load require('./config.json) 這是輸出構建目錄中的一個。

我知道這很棘手，但我沒有找到解決問題的其他方法。 也許它會幫助某人。

編輯

我不得不使用 webpack 來構建，因為沒有它就無法理解import config from 'config' 。 這就是我替換的原因：

externals: {
    './config.json': "require('./config.json')"
  }

和

var config = require('./config.json') //replace import config from 'config'

沒有 webpack，Javascript 理解var config = require('./config.json')因為它是正確的路徑。

當我用 webpack 構建時，當它看到 './config.json' 時，它會通過require('./config.json')改變，所以它可以工作

Answer 4

我最初尋找的行為現在似乎在名為Lazy Loading的功能下進行了描述。 該功能利用 動態導入來替代以前使用的require.ensure導入動態資源的方式。

由於我沒有自己的示例可在這里分享，因此我將把這個答案作為社區 Wiki 答案開放給任何想貢獻答案的人。

Answer 5

對於 Webpack 5：

假設您需要在運行時加載配置文件。 文件config.json ：

{
    "secret": "xxxccccvvvvXXXCCCVVV",
    "password": "1234567890"
}

在你的 webpack.(config|common|prod|dev).js 文件中：

const configFile = require('./path/to/your/config.json');
const { DefinePlugin } = require('webpack');
// ...rest of imports

function getConfig() { // Maybe move to a helper directory *shrugs*
   return JSON.stringify(configFile);
}

module.exports = {
...(rest of webpack configuration)

   plugins: [
      new DefinePlugin({
         common_config: DefinePlugin.runtimeValue(getConfig, true)
      })
   ]
}

最后，如果您使用 eslint，請添加以下內容以便編譯器不會抱怨：

"globals": {
   "common_config": "readonly"
}

現在在您的應用程序中，您可以隨時訪問common_config （無需導入）