5

I am currently using webpack to bundle up a javascript file with react. This file also has another import statement to another module within my project

import { MyModule} from './MyModuleFile.js'

Is there a way to exclude MyModule.js from the webpack bundle, and instead keep the import as is?

Cart
  • 63
  • 1
  • 1
  • 3
  • Check out [Webpack docs about conditions](https://webpack.js.org/configuration/module/#condition): as @connexo suggests, you need to exclude the part you don't want Webpack to resolve in the Webpack configuration file. – rishat Sep 25 '18 at 22:11

2 Answers2

8

What you're after might be the externals option in your webpack.config.js

module.exports = {
  //...
  externals: {
     './MyModuleFile': 'MyModule',
  }
};

This assumes you will include the script in your HTML manually which will expose the MyModule global

If you'd instead really like to use ES6 import, you could use the same technique because everything you put in there will just be exported as is

module.exports = {
  //...
  externals: {
     './MyModuleFile': 'import("MyModuleUrl")',
  }
};

But make sure you use the async version of import

import('./MyModuleFile').then(({default: MyModule}) => doSomethingWith(MyModule));

Or alternatively use the webpackIgnore comment to keep the import as is without changing the config

import(/* webpackIgnore: true */'MyModuleUrl').then(({default: MyModule}) => doSomethingWith(MyModule));
Tofandel
  • 3,006
  • 1
  • 29
  • 48
  • 1
    This doesn't work for me. The webpack step works, but I get a "Error: Cannot find module" from webpackMissingModule, so its obviously still tying to use webpack, not the ES6 module loading from the browser directly. Is there a step I'm missing? – griffin2000 Apr 05 '20 at 21:28
  • What's your externals config and how do you import your file? – Tofandel Apr 07 '20 at 10:40
  • You can see all the details in this separate thread: https://stackoverflow.com/questions/61050294/how-do-you-get-webpack-to-actually-ignore-an-external-and-rely-on-the-browser?noredirect=1&lq=1 – griffin2000 Apr 07 '20 at 13:34
  • But I setup like this: externals: { '/ffmpeg/ffmpeg-webm.js': 'ffmpeg', }, – griffin2000 Apr 07 '20 at 13:35
  • And import like this : import ffmpeg from '/ffmpeg/ffmpeg-webm.js'; – griffin2000 Apr 07 '20 at 13:35
  • I've verified '/ffmpeg/ffmpeg-webm.js' is a valid address – griffin2000 Apr 07 '20 at 13:35
  • You forgot to include the script in your html, adding it to externals does not include it for you. Eg: add `` in the head of your app – Tofandel Apr 08 '20 at 15:35
-4

Just add it to the exclude option in your loader configuration of your webpack.config.js:

rules: [
  // rules for modules (configure loaders, parser options, etc.)
  {
    test: /\.js$/,
    exclude: [
      /node_modules/,
      /MyModuleFile/
    ],
    ...
  }
]

https://webpack.js.org/configuration/module/#rule-exclude

connexo
  • 53,704
  • 14
  • 91
  • 128
  • 5
    I thought that exclude will only exclude those files from being transformed, but they are still bundled. I tried it out, and I see that my file is still included into the bundle, which is what I am trying to avoid. – Cart Sep 26 '18 at 16:23