vue.js-动态导入导致错误：目前未启用对实验语法'dynamicImport'的支持

Question

我今天是第一次使用Webpack 学习Vue.js，并试图使路由器能够处理惰性/动态导入。

我要使用惰性导入/动态导入，因为我正在重建内容管理系统，该系统具有在用户会话期间可能使用或可能不使用的许多页面，因此在需要时动态加载他们需要的模块更有意义关于我的申请。

我最基本的路由器当前如下所示：

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

function loadView(view) {
    return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`);
}

export default new Router({
    routes: [
        {
            path: "/",
            name: "dashboard",
            component: loadView("Dashboard")
        },
        {
            path: "/login",
            name: "login",
            component: loadView("Login")
        }
    ]
});

但是，我遇到以下编译错误：

./src/router/index.js中的错误模块构建失败（来自./node_modules/babel-loader/lib/index.js）：语法错误：..... / src / router / index.js：支持实验语法'dynamicImport'当前未启用

附加说明：

将@ babel / plugin-syntax-dynamic-import添加到Babel配置的“插件”部分以启用解析。

并告诉我哪条线是问题，无论如何这很明显：

return () => import(/*..........
             ^

我从几个月前独自使用Webpack时就意识到了这个错误，所以我知道我必须安装动态导入插件才能使此工作正常。

这是我安装的：

npm install babel-plugin-syntax-dynamic-import

我在babel.rc配置文件中提供了该插件，然后npm run dev重新编译了所有内容：

{
    "presets": [
        [
            "@babel/env", {
                "modules": false,
                "targets": {
                    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
                }
            }
        ]
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

但是我仍然遇到错误，并且仍然不能使用动态导入功能！难道我做错了什么？还有其他人在使动态导入生效时遇到麻烦吗？

---

我的webpack.config文件：

'use strict';

const webpack = require('webpack');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: [
        './src/app.js'
    ],
    devServer: {
        hot: true,
        watchOptions: {
            poll: true
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            outputStyle: 'compressed',
                            data: `
                                @import "./src/assets/scss/_variables.scss";
                                @import "./src/assets/scss/_mixins.scss";
                            `
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {
            "@": path.resolve(__dirname, './src'),
            "Components": path.resolve(__dirname, './src/components/')
        }
    },
    optimization: {
        minimizer: [new UglifyJsPlugin()],
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ]
}

我的package.json文件：

{
  "name": "manage_v2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config build/webpack.config.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.22",
    "vue-router": "^3.0.2",
    "vuex": "^3.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-dynamic-import-webpack": "^1.1.0",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "uglifyjs-webpack-plugin": "^2.1.1",
    "vue-loader": "^15.6.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

Answer 1

经过数小时的挫折后，我自己解决了问题。我仍然不知道为什么Babel，Webpack和Vue文档中使用的方法不起作用，但是我确实做到了这一点：

我首先从babel.rc文件中删除了插件声明，然后在webpack.config文件的babel loader中添加了一个选项：

{
    test: /\.js$/,
    use: {
        loader: "babel-loader",
        options: {
            plugins: [
                "@babel/plugin-syntax-dynamic-import"
            ]
        }
    }
}

我希望这对其他人有帮助。