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

Question

我正在构建一个 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，我可以做一些类似的事情吗？在运行时从项目目录文件？

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 会将此文件与你的应用程序捆绑在一起。