Webpack与Babel延迟加载模块使用ES6推荐使用Import（）方法无法正常工作 [英] Webpack with Babel lazy load module using ES6 recommended Import() approach not working

问题描述

我正在使用尝试使用webpack进行代码拆分和延迟加载import（）方法

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

我正在

'import'和'export'可能只出现在顶层

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

注意顶级导入工作正常，我只是在尝试使用import的动态变体时遇到问题（）

Note top level imports are working fine, i'm just getting an issue when I try and using the 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"
}

编辑：

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

If I change it so the syntax reads, it works.... but the chunk comments don't work to label the bundle. I'm confused because the documentation says the the following is depreciated.

在webpack中使用System.import不符合建议的规范，所以
它在webpack 2.1.0-beta.28中被弃用，转而使用import（）。

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
}

推荐答案

您需要插件 syntax-dynamic-import 能够使用Babel的 import（）函数。

You need the plugin syntax-dynamic-import to be able to use the import() function with Babel.

安装时使用：

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

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

And add it to your plugins:

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

这篇关于Webpack与Babel延迟加载模块使用ES6推荐使用Import（）方法无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！