webpack3-代码分割和懒加载中动态import遇到的问题

今天在学习代码分割和懒加载中使用动态import遇到了一个Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level

if (page === 'subPageA') {
    import ( /* webpackChunkName: 'subPageA'*/ './subPageA')
    .then(function(subPageA) {
        console.log(subPageA)
    })
} else if (page === 'subPageB') {
    import ( /* webpackChunkName: 'subPageB'*/ './subPageB')
    .then(function(subPageB) {
        console.log(subPageB)
    })
}

解决方法：

1. 通过npm安装babel-loader、babel-plugin-syntax-dynamic-import（重点！！！）、babel-preset-es2015
2. 在webpack.config.js中配置webpack：

module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015'],
                plugins: ['syntax-dynamic-import']
            }
        }]
    }