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

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/61050294/how-do-you-get-webpack-to-actually-ignore-an-external-and-rely-on-the-browser

标签

javascript

Webpack

es6-modules