Webpack.js.org: Document usage of `import()` for code splitting

[dmackerman]

Instead of the deprecated System.import.

As requested by @TheLarkInn. 😄

[catamphetamine]

A follow-up
https://github.com/webpack/webpack/issues/3777

The migration guide says:

If you want to use import with Babel, you'll need to install/add the dynamic-import syntax plugin while it's still Stage 3 to get around the parser error. When the proposal is added to the spec this won't be necessary anymore.

At the same time, seems that it has been added recently:
https://github.com/babel/babel/issues/4944

I'm now running my project without that babel syntax plugin and it seems to work.
So maybe reflect that in the migration guide, that the syntax plugin is not needed for the newest babel (or that developers should update their babel, though I'm not sure which package exactly, I just reinstalled all node_modules from scratch and it worked).

[jouni-kantola]

@halt-hammerzeit: I'm doing import() in this branch:
https://github.com/jouni-kantola/webpack-output-by-build-type/tree/webpack2

Without plugins: ["syntax-dynamic-import"] options to babel-loader I get:

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (10:24)

   8 | // using babel polyfill adds quite a lot of overhead
   9 | async function bootstrap() {
> 10 |     const { a } = await import('./deps/module-a.js');
     |                         ^
  11 |     a();
  12 |
  13 |     const { b } = await import('./deps/module-b.js');

This tells me code splitting with import doesn't work without syntax-dynamic-import.

[catamphetamine]

@jouni-kantola Did you reinstall node_modules?

rm -rf node_modules
npm install

[jouni-kantola]

Can you give me an example of your code? If you try this in babel's REPL, it throws:
Dynamic import

[catamphetamine]

@jouni-kantola Ok, if you're positive that it throws then it throws.
I'm not that much into babel and webpack.
And my repo is huge
https://github.com/halt-hammerzeit/webapp