有什么方法可以使用 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 （无需导入）