Question

对webpack执行代码拆分和延迟加载

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

我正在

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

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

编辑：

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

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

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

Answer 1

您需要插件syntax-dynamic-import才能将import()功能与Babel一起使用。

使用以下命令安装：

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

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

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

Webpack与Babel延迟加载模块使用ES6建议使用Import（）方法不起作用

1 个答案: