Webpack не генерирует пакеты для лениво загруженного кода в приложении Vue - PullRequest
Новая
       11

Webpack не генерирует пакеты для лениво загруженного кода в приложении Vue

0 голосов
/ 09 января 2019

Я пытаюсь добавить функцию отложенной загрузки в мое приложение Vue. Я хочу загружать маршруты с помощью Vue Router и динамического импорта. Я думаю, что мое приложение должно поддерживать его, но у меня есть ошибки, как на картинках ниже:

[1] https://imgur.com/uGWlj3W [2] https://imgur.com/4u6iusR

package.json 

    {
        "version": "2.1.1",
        "private": true,
        "scripts": {
            "serve": "vue-cli-service serve",
            "build": "vue-cli-service build",
        },
        "dependencies": {
            "vue": "^2.5.17",
            "vue-router": "^3.0.1"
        },
        "devDependencies": {
            "@vue/cli-plugin-babel": "^3.0.1",
            "@vue/cli-plugin-e2e-cypress": "^3.0.1",
            "@vue/cli-plugin-eslint": "^3.0.1",
            "@vue/cli-plugin-unit-jest": "^3.0.1",
            "@vue/cli-service": "^3.0.1",
            "@vue/eslint-config-standard": "^3.0.1",
            "@vue/test-utils": "^1.0.0-beta.20",
            "babel-core": "7.0.0-bridge.0",
            "babel-jest": "^23.0.1",
            "node-sass": "^4.9.0",
            "sass-loader": "^7.0.1",
            "vue-template-compiler": "^2.5.17",
            "webpack-cdn-plugin": "^2.2.1"
        }
    }

vue.config.js 

const webpack = require('webpack')
const WebpackCdnPlugin = require('webpack-cdn-plugin')

module.exports = {
assetsDir: 'static',
configureWebpack: () => {
    return {
        output: {
            filename: '[name].js',
            chunkFilename: '[name].js'
        },
        plugins: [
            new WebpackCdnPlugin({
            modules: [
                { name: 'vue', var: 'Vue', path: 'vue.min.js' }, // app minimal: 537KB
            ],
            prodUrl: '//cdnjs.cloudflare.com/ajax/libs/:name/:version/:path'
            })
        ],
        devServer: (process.env.NODE_ENV === 'production') ? {
            before: require('./tests/mock-api')
        } : {
            port: 3022,
            disableHostCheck: true
        }
        }
    }
}

router.js 

import Vue from 'vue'
import Router from 'vue-router'

const Hub = () => import(/* webpackChunkName: "hub" */ './views/hub/Index.vue');

Vue.use(Router)

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        { path: '/', component: Hub },
        { path: '*', redirect: '/' }
    ]
})

Я ожидаю загрузки кусков без ошибок

...