How do you get webpack to *actually* ignore an external and rely on the browser to import?

user_1106528 0
Viewed 2206

I'm trying to get webpack to ignore an import, so that its imported by the browser using a native ES6 import statement, not webpack. I'm trying to get ffmpeg.js to import directly as it crashes webpack when it tries to bundle it, as the files are too large.

Following the answer here (How to exclude a module from webpack, and instead import it using es6), I have my code in the local tree as /ffmpeg/ffmpeg-mpeg.js and verified my dev server can access as http://localhost:8080/ffmpeg/ffmpeg-webm.js

I then import via:

  import ffmpeg from '/ffmpeg/ffmpeg-webm.js';

And add that to the externals section of my webpack config:

  externals: {
    '/ffmpeg/ffmpeg-webm.js': 'ffmpeg',
  },

The result is an link that looks like this

webpack:///external "ffmpeg"

containing:

module.exports = ffmpeg;

Which then fails with "Uncaught Error: Cannot find module ?" (In fact that error is hardcoded in the generated file)

So that seems to assume there is a global ffmpeg option and then maps that module to that, but instead I want it leave the line completely untouched by webpack and leave it to the browser.

Whats the correct way to do that? The exclude rule thats downvoted on that page doesn't work either.

es6-modules webpack javascript
1 Answers

Edit:

You can use this:

import(/* webpackIgnore: true */'/ffmpeg/ffmpeg-webm.js').then(({default: ffmpeg}) => {
  //Do what you want to do with ffmpeg
});

Which will prevent webpack from compiling the import (so it will be a regular ES6 import)

Original answer:

You forgot to include the external script in your page.

Also since you pointed out that your file is very big, I'd recommend to include it defered

So you need to add

<script src="/ffmpeg/ffmpeg-webm.js" defer></script>

To the head of your app and you would then import it slightly differently using the import function with a callback

import('/ffmpeg/ffmpeg-webm.js').then(ffmpeg => {
  //Do what you want to do with ffmpeg
});

Small note: the externals key does not need to be the path of your file, it's just the name you will use when importing, so rename it if you are getting confused with the path

module.export = {
  //...
  externals: {
    "ffmpeg-webm": "ffmpeg"
  }
}
//Then import
import('ffmpeg-webm').then(ffmpeg => {
  //Do what you want to do with ffmpeg
});

Alternatively for node js, instead of using externals you could use

const ffmpeg = __non_webpack_require__('/ffmpeg/ffmpeg-webm.js')

Just keep in mind that this will transform it as a normal require that only works with node js

user_29771750
Related