本地库的 Webpack 外部配置

Question

我想设置我的 Webpack 配置 (v4+) 以排除引用本地库的导入。在我的应用程序中，我像这样导入这个库：

/src/index.js

import foo from '../foo/foo'

console.log(foo);

/foo/foo.js

export default foo = "bar";

webpack.config.js

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist')
    },
    externals: {
      "foo": path.resolve(__dirname, "./foo/foo"),
    }
  };

但是，这个库实际上已经在我部署应用程序的站点中全局引用。所以我不希望这个库与我的应用程序捆绑在一起（我仍然需要导入它，以便我可以无错误地转换我的打字稿并使用智能感知）。

我发现我可以通过使用 externals 属性轻松地将库排除在捆绑之外，如下所示：

module.exports = {
  externals: {
    "jquery": "jQuery"
  }
}

我对我正在导入的库做同样的事情没有成功。我该怎么做呢？我尝试了以下方法，但该库仍包含在我的捆绑包中：

我一直在研究文档，似乎只能找到与节点模块相关的示例，而没有针对我的要求。

如果您需要任何其他详细信息，请告诉我。提前致谢！

Answer 1

为了让 WebPack 将您的导入视为外部，您的导入声明必须使用您在 WebPack extenals 配置中定义的相同别名，而不是相对路径：

import Foo from 'foo';

网页包：

module.exports = {
  externals: {
    "foo": path.resolve(__dirname, "./path/to/foo")
  }
}