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

最新推荐文章于 2024-07-17 22:19:25 发布

chenyHahaha

最新推荐文章于 2024-07-17 22:19:25 发布

阅读量4.6k

点赞数

分类专栏： webpack 文章标签： webpack3 前端动态import

本文链接：https://blog.csdn.net/chenyHahaha/article/details/80606430

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天在学习代码分割和懒加载中使用动态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)
    })
}

解决方法：

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

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