Webpack mit Babel faul Lademodul ES6 mit den empfohlenen Import() -Ansatz arbeiten

Question

nicht

Ich versuche Code Splitting und träges Laden mit webpack zu tun, um die import() method

import('./myLazyModule').then(function(module) { 
    // do something with module.myLazyModule 
} 

mit Ich erhalte

‚Import‘ und ‚Export‘ können nur auf der obersten Ebene erscheinen

Hinweis Top-Level-Importe arbeiten gut, ich bin immer nur ein Problem, wenn ich t ry und die dynamische Variante der Import mit()

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:

Wenn ich ändern Sie es so die Syntax liest, es funktioniert .... aber die Chunk Kommentare funktionieren nicht das Bündel beschriften . Ich bin verwirrt, weil die Dokumentation besagt, dass das Folgende abgeschrieben ist.

Die Verwendung von System.import in webpack nicht die vorgeschlagene Spezifikation passte, so es in webpack 2.1.0-beta.28 für Import veraltet wurde().

System.import('./myLazyModule').then(function(module) { 
    // do something with module.myLazyModule 
} 

Answer 1

Sie müssen das Plugin syntax-dynamic-import Lage sein, die import() Funktion mit Babel zu verwenden.

Installieren Sie es mit:

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

und fügen Sie Ihre Plugins:

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