7

我今天第一次使用 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 配置的 'plugins' 部分以启用解析。

并告诉我哪一行是问题，这很明显：

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"
  }
}
4

2 回答 2

18

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

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

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

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

于 2019-02-02T17:49:48.483 回答
2

你有错误的插件分配：

"plugins": ["@babel/plugin-syntax-dynamic-import"]

将是该插件的正确格式。

于 2019-02-02T16:44:43.397 回答