有没有办法在运行时使用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在运行时解析并加载.

可能相关的问题:

• 如何使用webpack在js文件中加载CDN或外部供应商javascript lib,而不是在html文件中
• Webpack - 动态需求和路径
• 使用webpack在运行时动态地需要JS文件

Answer 1

我想你想要的是require.ensure,webpack的代码分割.您'确保'的模块被放入一个单独的包中,当您的'ensure'在运行时执行时,webpack运行时会自动通过ajax获取包.请注意确保的回调语法 - 当bundle完成加载时运行回调.此时您仍需要所需的模块; .ensure只是确保它们可用.

代码拆分是webpack的主要功能之一,它允许您在任何给定时间仅加载您需要的内容.还有插件等来优化多个捆绑包.

Answer 2

使用Webpack 2,您可以使用System.import.它使用Promise API.AFAIK,目前无法在浏览器中运行异步/等待代码.我相信Babel只能异步/等待到ES2015,因此只有最新版本的Node(v6.x)可以运行它.我不认为浏览器能够理解它,因为转换后的代码使用生成器.

对于System.import,请注意一些较旧的浏览器(我相信IE 11及以下版本)将要求您填充Promise API.请查看polyfill.io.

如果你真的想在浏览器中使用async/await,你可以为ES2015做一个完整的polyfill.