升级babel7 和webpack4 后配置@babel/plugin-syntax-dynamic-import插件无效

问题描述：

问题描述

• 由babel6和webpack3升级到babel7 和webpack4 后配置@babel/plugin-syntax-dynamic-import插件无效
• 这是个vue ssr项目

问题出现的环境背景及自己尝试过哪些方法

• 删除babel-plugin-syntax-dynamic-import后重新安装@babel/plugin-syntax-dynamic-importy依然无效
• 改用babel-plugin-dynamic-import-webpack插件可以，但是webpackChunkName失效

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

• router.js代码

import Vue from 'vue'
import Router from 'vue-router'
import { formatPath } from "../util/router"
import config from '@/config'

Vue.use(Router)

/**
 * 路由生成器
 * @param routes
 * @returns {VueRouter}
 */
export const createRouter = new Router({
    mode: 'history',
    fallback: false,
    scrollBehavior: (to, from, savedPosition) => {
        if(to.meta.savePosition) {
            return savedPosition
        }
        else {
            return {
                x: 0,
                y: 0
            }
        }
    },
    routes: [
        { path: formatPath('/'), component: () => import(/*webpackChunkName: 'index'*/'../views/index/index') },
        { path: formatPath('/activities'), component: () => import(/*webpackChunkName: 'activities'*/'../views/index/activities/index-v1') },
        { path: formatPath('/download'), component: () => import(/*webpackChunkName: 'download'*/'../views/index/download') },
        { path: formatPath('/services'), component: () => import(/*webpackChunkName: 'services'*/'../views/index/services/index') },
        { path: formatPath('/about'), component: () => import(/*webpackChunkName: 'about'*/'../views/index/about') },
        { path: formatPath('/contact'), component: () => import(/*webpackChunkName: 'contact'*/'../views/index/contact') },
        { path: formatPath('/privacy'), component: () => import(/*webpackChunkName: 'privacy'*/'../views/index/privacy') },
        { path: formatPath('/disclaimer'), component: () => import(/*webpackChunkName: 'privacy'*/'../views/index/disclaimer') },
        { path: formatPath('/open-api'), component: () => import(/*webpackChunkName: 'open-api'*/'../views/index/open-api') },
        { path: formatPath('/helpcenter'), component: () => import(/*webpackChunkName: 'helpcenter'*/'../views/index/helpcenter') },
        { path: formatPath('/helpframe/:catalogId_1'), component: () => import(/*webpackChunkName: 'helpframe'*/'../views/index/helpframe/index'),
            children: [
                { path: 'catalog/:index', component: () => import(/*webpackChunkName: 'helpcatalog'*/'../views/index/helpframe/catalog') },
                { path: 'detail/:detailId', component: () => import(/*webpackChunkName: 'helpdetail'*/'../views/index/helpframe/detail') }
            ]
        },
        { path: '/', redirect: `/${config.defaultDistrict}/${config.defaultLang}/` }
    ]
})

• babel.config.js

module.exports = function (api) {
    api.cache(true)
    
    return {
        presets: [
            ['@babel/preset-env', { 'modules': false }]
        ],
        plugins: [
            '@babel/plugin-syntax-dynamic-import',
            '@babel/plugin-transform-runtime',
            [
                'component',
                {
                    'libraryName': 'element-ui',
                    'styleLibraryName': 'theme-chalk'
                }
            ]
        ]
    }
}

你期待的结果是什么？实际看到的错误信息又是什么？

• 使用@babel/plugin-syntax-dynamic-import错误提示

• 使用babel-plugin-dynamic-import-webpack结果(

ame失效)

这周要开会谈论新项目的代码要每个人说活代码的有点和缺点，刚刚工作没什么头绪想问问大家怎么来分析react代码中的优点和缺点代码是半成品，有基本的框架和核心的流程