Webpack with Babel lazy load module using ES6 recommended Import() approach not working -

i'm trying code splitting , lazy loading webpack using import() method

import('./mylazymodule').then(function(module) {     // module.mylazymodule } 

i'm getting

'import' , 'export' may appear @ top level

note top level imports working fine, i'm getting issue when try , using dynamic variant of import()

var path = require('path');  module.exports = {     entry: {         main: "./src/app/app.module.js",     },     output: {         path: path.resolve(__dirname, "dist"),         filename: "[name]-application.js"     },     module: {         rules: [             {                 test: /\.js$/,                 use: [{                     loader: 'babel-loader',                     query: {                         presets: ['es2015']                     }                 }]             }         ]     },     resolve : {         modules : [             'node_modules',             'bower_components'         ]     },     devtool : "source-map" } 

edit:

if change syntax reads, works.... chunk comments don't work label bundle. i'm confused because documentation says the following depreciated.

the use of system.import in webpack did not fit proposed spec, deprecated in webpack 2.1.0-beta.28 in favor of import().

system.import('./mylazymodule').then(function(module) {     // module.mylazymodule } 

you need plugin syntax-dynamic-import able use import() function babel.

install with:

npm install --save-dev babel-plugin-syntax-dynamic-import 

and add plugins:

{     presets: ['es2015'],     plugins: ['syntax-dynamic-import'] }