任何使用webpack在運行時加載資源的方式？

Question

我有一個.json文件，其中包含我希望使用典型的import/require語法從其他腳本文件中引用的配置內容。目前我正在使用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解決，在運行時加載。

可能相關的問題：

• how to use webpack to load CDN or external vendor javascript lib in js file, not in html file
• Webpack - dynamic require and paths
• Require JS files dynamically on runtime using webpack

Answer 1

我想你想要的是require.ensure，的WebPack代碼分裂。您'確保'的模塊被放入一個單獨的包中，並且當'確保'在運行時執行時，webpack運行時會自動通過ajax獲取包。請注意確保的回調語法 - 您的回調在包加載完成後運行。您仍然需要在該點需要所需的模塊; 。確保只是確保它們可用。

代碼拆分是webpack的主要功能之一，它可以讓你在任何時候只加載你需要的東西。有插件等，以優化多個捆綁。

Answer 2

使用Webpack 2，您可以使用System.import。它使用Promise API。 AFAIK，目前沒有辦法在瀏覽器中運行異步/等待代碼。我相信Babel只能將異步/等待下載到ES2015，因此只有最新版本的Node（v6.x）才能運行它。我不認爲瀏覽器能夠理解它，因爲傳輸的代碼使用了生成器。

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

如果您真的想在瀏覽器中使用異步/等待，您可能可以爲ES2015做一個完整的polyfill。

Answer 3

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

我決定把它與Copy-Webpack-Plugin

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

之後複製，我的文件是在輸出build目錄。我用 '外部材料' 屬性引用我的檔案在我webpack.config文件：

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

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

import config from 'config' 

'配置' 負載要求（」。 /config.json），它是輸出生成目錄中的一個。

我知道這很棘手，但我沒有找到解決我的問題的另一種解決方案。也許它會幫助別人。

編輯

我不得不爲了打造，因爲import config from 'config'不是沒有它理解使用的WebPack。這就是爲什麼我更換：

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

和

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

沒有的WebPack，使用Javascript瞭解var config = require('./config.json')，因爲這是正確的道路。

當我構建具有的WebPack，它通過require('./config.json')當它看到「./config.json」改變，所以它的工作原理