Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamic import named export using Webpack

Using webpack, if I want to code-split an entire module, I can change

import Module from 'module'

at the top of my file to

import('module').then(Module => {...

when I need to use the module (docs). Is it possible to do this but with just a single named export? That is, how could I code-split the following:

import {namedExport} from 'module'

like image 299
Daniel Elkington Avatar asked Jan 23 '19 00:01

Daniel Elkington


People also ask

How does webpack dynamic import work?

Whenever you import a file in your code, Webpack will look for it in the project directory and copy it to the build folder with a new name, then Webpack replaces the import code in your bundled JavaScript file with the path to the newly copied file.

Does webpack use CommonJS?

Webpack supports the following module types natively: ECMAScript modules. CommonJS modules.

What are dynamic imports?

The import() call, commonly called dynamic import, is a function-like expression that allows loading an ECMAScript module asynchronously and dynamically into a potentially non-module environment.

Can webpack split code into separate files?

Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel.

What happens when you import a file in Webpack?

Whenever you import a file in your code, Webpack will look for it in the project directory and copy it to the build folder with a new name, then Webpack replaces the import code in your bundled JavaScript file with the path to the newly copied file. What is a dynamic import?

What are the methods supported by Webpack?

The following methods are supported by webpack: Statically import the export s of another module. The keyword here is statically. A normal import statement cannot be used dynamically within other logic or contain variables. See the spec for more information and import () below for dynamic usage. Export anything as a default or named export.

Can I use magic comments for Dynamic imports in Webpack?

@yvele you can, just use the magic comments: webpack.js.org/api/module-methods/#magic-comments Sure but I don't see the added value of using individual magic comments for all dynamic imports when a generic developer friendly name is OK for me.

Is it possible to use ES2015 Dynamic imports with Webpack?

But for this article, I’m going to use the proposed ES2015 dynamic imports supported by Webpack, since the v2, through a babel plugin and the extra specific Webpack features for it. Update: If you’re using Babel 7.5+ it already includes the dynamic import plugin for you ;)


1 Answers

const DynamicFoo = dynamic(import('../components/Foo').then(module => {
  const {Foo} = module
  return Foo
}));

OR

import(/* webpackChunkName: "chunkName" */ '../component/Foo').then(module => {
  const {Foo} = module.default
  this.setState({ foo: Foo })
})
like image 117
varoons Avatar answered Sep 27 '22 23:09

varoons