带有 Babel 延迟加载模块的 Webpack 使用 ES6 推荐的 Import() 方法不起作用

Question

使用 webpack 进行代码拆分和延迟加载

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

我正在

'import' and 'export' may only appear at the top level

注意顶级导入工作正常，我只是在尝试使用 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"
}

编辑：

如果我更改它以便语法读取，它可以工作....但是块注释不能用于标记包。我很困惑，因为文档说以下内容已折旧。

The use of System.import in webpack did not fit the proposed spec, so it was deprecated in webpack 2.1.0-beta.28 in favor of import().

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

Answer 1

您需要插件 syntax-dynamic-import 才能使用 Babel 的 import() 功能。

安装：

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

并将其添加到您的插件中：

{
    presets: ['es2015'],
    plugins: ['@babel/plugin-syntax-dynamic-import']
}

带有 Babel 延迟加载模块的 Webpack 使用 ES6 推荐的 Import() 方法不起作用

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

import

lazy-loading

ecmascript-6

webpack

babeljs