Webpack change import path for a specific package

Question

Let's assume, we do have few js libs, that installed into our bundle. And, for some reason, I need to use a library from node_modules of a library. I can do import it via

import thing from 'somelib/node_modules/thing';

And I want to do just:

import thing from 'thing';

But behind the scenes, webpack will know - the path should be 'somelib/node_modules/thing'

How can I change/override a specific import path in my webpack config file, so my node will bring me a package from the destination that I want?

jomofrodo · Accepted Answer · 2019-02-02 00:24:18Z

3

I think you are looking for resolve.alias

https://webpack.js.org/configuration/resolve/#resolve-alias

answered Feb 2, 2019 at 0:24

jomofrodo

1,14911 silver badges19 bronze badges

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

Comments

Cody Geisler · Accepted Answer · 2018-12-04 15:20:44Z

In your webpack config, specify the resolve.modules

This example from the webpack documentation adds the "src" folder.

module.exports = { //... resolve: { modules: [path.resolve(__dirname, 'src'), 'node_modules'] } };

Or if you really don't want this affecting your other entry points, you could create separate webpack configs. (They can still import settings from a primary file) that allows you to set resolve.aliases and resolve.modules independently for each entry point.

Its an example for all imports. I need a rewrite rule ONLY for a single module
This seems to fit the bill, I'm confused why it matters to you that all imports are affected by this. Do you only want it to search the "somelib" folder sometimes? (I.e. you have multiple entry points) If you have multiple entry points you could create multiple webpack config files that pull from a centralized webpack file for the majority of the options but then has different resolve.modules for each entry point...

user9987636 · Accepted Answer · 2023-05-15 03:32:06Z

module.exports = { //... resolve: [ function() { regexNpmPgkName.test(xxx) { callback() } } ] };

Collectives™ on Stack Overflow

Webpack change import path for a specific package

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related