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!

Make sure you import from Foo and not from the complete path to Foo. i.e. import {something} from 'Foo'; — Yoav Kadosh
– Yoav Kadosh, Commented Jun 12, 2019 at 19:15
@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
– Dustin, Commented Jun 13, 2019 at 12:29

Yoav Kadosh · Accepted Answer · 2019-06-13 16:31:33Z

7

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

edited Jun 13, 2019 at 16:31

answered Jun 12, 2019 at 19:19

Yoav Kadosh

5,2154 gold badges44 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dustin Over a year ago

Revised code in original question. Does that change your answer at all?

Yoav Kadosh Over a year ago

Not really (only in casing...). You are importing using a relative path, instead of using the foo alias. That's why it isn't working for you.

Dustin Over a year ago

Thanks! I didn't know that I could just use an alias in stead of relative path after configuring webpack.

Yoav Kadosh Over a year ago

@Dustin glad I could help!

Dustin Over a year ago

So I originally thought that this was working for me, but it was actually excluding the file since there was an error in the bundle. ERROR in bundle.js from Terser Unexpected token: punc (:) When I loaded it up in the browser, I was seeing that the external was referencing my local file system (e.g., "C:\path\to\foo"). I'm not sure whether or not that this error caused the file to not be included in the bundle, or that is another error not related to this question.

|

Collectives™ on Stack Overflow

Webpack Externals Configuration for a Local Library

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related