本地库的 Webpack 外部配置 [英] Webpack Externals Configuration for a Local Library

问题描述

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

I want to setup my Webpack config (v4+) to exclude an import that is referencing a local library. In my app, I import this library like so:

/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"),
    }
  };

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

However, this library is actually already referenced globally in the site where I'm deploying my application. So I do not want this library bundled with my application (I still need to import it so that I can transpile my typescript without errors and use intellisense).

我发现我可以通过像这样使用 externals 属性轻松地将库排除在捆绑之外:

I found out that I can easily exclude a library from being bundled by utilizing the externals property like so:

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

我对导入的库做同样的事情没有成功.我该怎么做呢?我尝试了以下操作，但该库仍包含在我的包中:

I've been unsuccessful at doing the same with the library that I'm importing. How would I go about doing this? I've tried the following and the library is still included in my bundle:

我一直在研究文档，似乎只能找到与节点模块相关的示例，而没有任何特定于我的要求.

I have been researching documentation and can only seem to find examples related to node modules and nothing specific to my requirements.

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

Please let me know if you need any additional details. Thanks in advance!

推荐答案

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

In order for WebPack to treat your import as external, your import declaration must be using the same alias you defined in the WebPack extenals configuration, and NOT a relative path:

import Foo from 'foo';

WebPack:

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

这篇关于本地库的 Webpack 外部配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！