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

【问题标题】：How to import an external file from project root with webpack?如何使用 webpack 从项目根目录导入外部文件？
【发布时间】：2019-06-12 21:57:48
【问题描述】：

我正在构建一个 npm 包，它将接受来自项目根目录的自定义规则 - 类似于 prettier 在项目根目录中查找 .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 文件，我可以做些类似的事情吗？

【问题讨论】：

标签： javascript reactjs npm webpack webpack-2

【解决方案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 会在您导入此文件时将其与您的应用程序捆绑在一起。

【讨论】：

【解决方案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'
    ]
}

我对这个解决方案没意见，因为最终从后端恢复的任何文件都会涉及到提取，因此无需额外费用。而且我确定我使用的是正确的位置，因为我使用的是由 script 标签生成的引用。

希望这对某人有所帮助。

【讨论】：