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!

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!

• javascript
• typescript
• webpack

• Do you have type declarations for that specific library? – P Ackerman Commented Jun 12, 2019 at 19:14
• 1 Make sure you import from Foo and not from the plete path to Foo. i.e. import {something} from 'Foo'; – Yoav Kadosh Commented Jun 12, 2019 at 19:15
• @dustin see my answer below – Yoav Kadosh Commented Jun 13, 2019 at 7:30
• @PAckerman I don't have a type declarations for that library. It's mainly just a ts file that's exporting a class like export class Foo {} – Dustin Commented Jun 13, 2019 at 12:29

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