如何使用 webpack 从项目根目录导入外部文件？

Question

我正在构建一个 npm 包，它将从项目根目录接收自定义规则 - 类似于.prettierrc在项目根目录中查找.prettierrc的方式。

在我的包中，我使用 webpack 来编译构建。 我的应用程序使用 react，这是我从外部引入的，以便在运行时检索包，而不是在构建时进行捆绑。

webpack.config.js

    module.exports = {
  entry: "./src/index.js",
  output: {...},
  module: {...},
  resolve: {
    modules: [path.resolve("./src"), path.resolve("./node_modules")],
    alias: {
      react: path.resolve(__dirname, "./node_modules/react"),
      "react-dom": path.resolve(__dirname, "./node_modules/react-dom")
    }
  },
  externals: {
    react: {
      commonjs: "react",
      commonjs2: "react",
      amd: "React",
      root: "React"
    },

    "react-dom": {
      commonjs: "react-dom",
      commonjs2: "react-dom",
      amd: "ReactDOM",
      root: "ReactDOM"
    }
  }
};

在externals您可以看到我从构建中排除了react和react-dom 。

现在，我需要一种从项目根目录导入常规settings.js文件的方法，而不是从node_modules导入库。 webpack 有这个能力吗？

到目前为止，我已经尝试使用externals来导入它，如下所示：

externals: {
    react: {...},
    "react-dom": {...},
    "settings": { commonjs: "settings.js" }
  }

我知道这是错误的，但是为了在运行时从项目目录导入外部.js文件，我可以做一些类似的事情吗？

Answer 1

我鼓励你捆绑而不是尝试在运行时导入东西。 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 会将此文件与您的应用程序捆绑在一起。

Answer 2

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

所以最后我最终做了我最初不想做的事情，使用 fetch （XMLHttpRequest 在打字稿中等效）恢复文件。 我对这个解决方案的主要担忧是正确计算出 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'
    ]
}

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

希望这可以帮助某人。