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

Question

问题描述

• 由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失效)

Answer 1

一样的错误，使用@babel/plugin-syntax-dynamic-import后提示缺少loader，请问解决了吗？

Answer 2

是Webpack的bug
webapck4.29及以上版本都存在该bug，改用webpack4.28版的就没问题了。

Answer 3

我webpack的是4.32.0版本的，这个也有问题吗

Answer 4

可以试试在 webpack的配置文件中引用：

    js: [{
      loader: 'babel-loader',
      options: {
        plugins: [
          '@babel/plugin-syntax-dynamic-import',
        ],
      },
    }],

Answer 5

现在是不是不需要引用这个了？
我webpack上可以直接使用啊
我看官网文档说只需要添加一个支持promise的polyfill就可以了