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。

可能相关的问题：

Answer 1

我认为你想要的是require.ensure，webpack的代码拆分。您确保＆＃39;的模块。被放入一个单独的捆绑包，并且当你确保＆＃39;在运行时执行，webpack运行时自动通过ajax获取bundle。请注意确保的回调语法 - 当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。

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')"
  }

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

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

对于 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（无需导入）

有没有办法在运行时使用webpack加载资源？

4 个答案: