Importing From Outside Webpack (runtime Importing)

This is just something I thought today and I didn't see a lot of information so I'm going to share this weird cases and how I personally solved them (if there's a better way pleas

Solution 1:

There's a workaround provided by webpack actually:

A variable called __non_webpack_require__ which is the original require so, in your code, you can do this:

const internalModule = require('internal/module');
// or import internalModule from 'internal/module'; in the ES6 wayconst externalModule = __non_webpack_require__('external/module');

If you are using TypeScript, you can add this line in your global.d.ts file to avoid syntax errors:

declareconst __non_webpack_require__: NodeRequireFunction;

Fact 1: Actually after the build, you can see how your commonly used require (webpack's) has been renamed to __webpack_require__, and that __non_webpack_require__ has been preserved as the original require.

Fact 2: Webpack also use the original require to import modules from the system (not bundled with the code), such as net, events, fs, etc.