Webpack Externals Configuration for a Local Library

Question

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).

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!

Answer 1

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")
  }
}