How to require JavaScript using webpack from a dynamic directory

Question

I have some old-school plain old ES5 JavaScript that I need to pull into my application that is using webpack as a bundler. The problem is that the location of these files is in a folder whose path is dynamic. It seems that webpack does not work well with expressions in require and require.context doesn't allow them at all.

For known path directories to require all the files in a directory and its subdirectories, this approach works fine:

let domainRequires = require.context('./app/domain', true, /\.js$/); domainRequires.keys().forEach(domainRequires);

Since I can't use an expression in require.context, I tried just using plain require and it is NOT working:

require('../../path/to/code/my-library-' + versionNumber + '/domain/clazz.js');

using the full relative path.

I've also tried to use require.context but enhancing the regex portion to get it working and haven't had luck:

require.context('../../path/to/code', true, /^my-library-.*\/domain\/.*\.js$/);

Any thoughts, suggestions, or solutions would be welcome. If I need to use something 3rd party with webpack, that's fine too.

John Weisz · Accepted Answer · 2017-01-02 13:48:39Z

16

I ended up figuring this out. By using the webpack resolve.alias, I could add:

resolve: {
  alias: {
    common: path.resolve(__dirname, '../../path/to/code/my-library-' + versionNumber + '/domain')
  }
}

in webpack.config.

Then in my code, I can require all of the files under /domainvia:

var commonRequires = require.context('common', true, /\.js$/);
commonRequires.keys().forEach(commonRequires);

Likewise, I could get a single file via:

require('common/clazz.js'); // ../../path/to/code/my-library-1.0.0/domain/clazz.js

FWIW, to get versionNumber I used node's fs module to read from a json file, used JSON.parse(file) and then retrieved the version at the top of webpack.config

edited Jan 2, 2017 at 13:48

John Weisz

32.2k14 gold badges97 silver badges138 bronze badges

answered Nov 10, 2016 at 21:18

Alex White

8023 gold badges9 silver badges18 bronze badges

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

2 Comments

tylik Over a year ago

What if you have multiple dynamic variables? I need to require from a loop. This is a real pain. Don't know why they've made it so hard to implement...

Alex White Over a year ago

This solution does require in a loop. See for the forEach. @tylik

Anders · Accepted Answer · 2017-12-13 13:01:05Z

0

From Webpack 3.9 (I think) the commonRequires is not needed. I run this in webpack.config.js:

resolve: {
  alias: {
    tmpDir: path.resolve(__dirname, '/tmp')
  }
}

And then I load my custom module as:

const dynModule = require('tmpDir/dyn_module.js');

Not sure if I miss something from your requirements but commonRequires is not needed for me and Webpack builds this just fine (and it works).

answered Dec 13, 2017 at 13:01

Anders

3,4211 gold badge28 silver badges48 bronze badges

1 Comment

Alex White Over a year ago

Hi @Anders, you are correct. The commonRequires is not related to the solution at all (I never intended it to be construed that way). This was just an example of requiring all files in a directory which was at a dynamic path. If you look back at the accepted answer you can see I also noted: "Likewise, I could get a single file via..."

Collectives™ on Stack Overflow

How to require JavaScript using webpack from a dynamic directory

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related