我鼓励你捆绑而不是尝试在运行时导入东西。Webpack 是一个打包器。当你试图解决它的设计目的时，事情会变得一团糟。

是的，您可以将根目录之外的文件导入到您的包中。这是我的一个使用外部代码的应用程序的示例。

{
    test: /\.js?$/,
    include: [
      path.resolve(__dirname),
      path.resolve(__dirname, "../Public/js/src/common")
    ],
    exclude: /node_modules/,
    loader: "babel-loader"
  }

我还创建了一个别名。

      common: path.resolve(__dirname, "../Public/js/src/common"),

当您导入它时，Webpack 会将此文件与您的应用程序捆绑在一起。

我真的需要加载一个外部 json 文件，实际上是一个由我的部署过程创建的 settings.json 文件，它位于由 webpack 生成的 min.js 文件旁边。我尝试了外部，路径解析器，我能想象到的一切，但没有任何效果。

所以最后我最终做了我最初不想做的事情，使用 fetch （XMLHttpRequest 在typescript中等效）恢复文件。我对这个解决方案的主要担忧是正确计算出 url。如果您在可能涉及多级代理和子路径的环境中工作，这可能是一个问题。

我的最终解决方案是在我的所有根 html 文件中包含一个指向该文件的脚本（我有多个）：

<script id="very_unique_id" src="settings.json" type="application/json"></script

然后从我的 javascript 加载该资源并恢复路径：

let element = document.getElementById(ENVIRONMENT_SETTINGS_SCRIPT_ID);
let src = element.src;

let response = await fetch(src);
let settings = await response.json();

那么，为什么要使用script元素而不是仅仅构建 url？嗯，基本上我想确保我从正确的来源加载文件，无论我的客户的路径如何。我们使用代理，通常会涉及一个我不知道的 javascript 子路径。

最后在插件和所有内容之后的 webpack config.js 文件中，我添加了一个外部条目以防止打包时出错：

module.exports = {
    plugins: {
    ...
    },
    externals: [
        'settings.json'
    ]
}

我对这个解决方案没有意见，因为最终从后端恢复的任何文件都会涉及到提取，所以没有额外的成本。而且我确信我使用了正确的位置，因为我使用的是脚本标记生成的引用。

希望这可以帮助某人。