Сложности при настройке Webpack с vuejs и vuetify

Question

В настоящее время я пытаюсь переключиться с BootstrapVue на Vuetify для моего Vuejs, и для достижения этого я делаю совершенно новое "приложение" с vue create ... рядом с существующим, чтобы я можете сравнить, что я делаю.

BootstrapVue один работал хорошо. Когда я его создал, я использовал vue init webpack .... Дело в том, что он создает автоматические c конфигурации для Webpack (много файлов).

Поэтому на этот раз я решил, так как я начинал с нуля с vuetify, также выполнить свой пользовательский Webpack конфигурации, но есть некоторые вещи, которые я не могу сделать, и некоторые вещи, которые происходят, и я не знаю почему.

A. Структура вывода Webpack

В то время как в моем прецедентном проекте я получил (с созданной конфигурацией automati c) что-то вроде этого:

Теперь с моей пользовательской конфигурацией у меня это с webpack --config webpack.config.js:

Пока vue-cli-service build производит:

1. Я бы хотел, чтобы все связанные файлы были в папке static/, как на первом изображении, для упрощения интеграция с моим бэкэндом (Django), который будет знать, что все файлы static находятся в static/. Как я могу это сделать?
2. Кажется, что с моей пользовательской конфигурацией, он создает только 2 .js файлов. Тот, который, кажется, содержит все .. И тот, который, кажется, обычно называют manifest в Webpack.

B. Сборка

В package.json, если я использую "build": "vue-cli-service build" или "build": "webpack --config webpack.config.js", это не даст тот же результат, который, я думаю, это нормально, и я думаю, что я должен использовать второй конечно, но он выдает много предупреждений, таких как:

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (507 KiB)
      main.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  main.js (507 KiB)

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior.

И ТАКЖЕ 1 ПРЕДУПРЕЖДЕНИЕ для Vuetify компонента, я приведу здесь только 1, например:

WARNING in ./node_modules/vuetify/lib/components/VCalendar/mixins/times.js 3:15-18
"export 'default' (imported as 'Vue') was not found in 'vue'
 @ ./node_modules/vuetify/lib/components/VCalendar/mixins/calendar-base.js
 @ ./node_modules/vuetify/lib/components/VCalendar/VCalendarWeekly.js
 @ ./node_modules/vuetify/lib/components/VCalendar/VCalendar.js
 @ ./node_modules/vuetify/lib/components/VCalendar/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/plugins/vuetify.js
 @ ./src/main.js

Как я могу решить эти ошибки?

Это не производит те же самые пакеты также. Команда webpack создает только 2 .js файлов, в то время как vue-cli-service build создает папки css img и js, как в image 2 этого сообщения.

SOURCES

Это моя Webpack пользовательская конфигурация:

'use strict'
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const isDev = function () {
  return (process.env.NODE_ENV === 'development') ? true : false
}

const isProd = function () {
  return (process.env.NODE_ENV === 'production') ? true : false
}

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      'vue$': isDev ? 'vue/dist/vue.runtime.js' : 'vue/dist/vue.runtime.min.js',
      '@': path.resolve(__dirname, 'src/'),
      'views': path.resolve(__dirname, 'src/views/'),
      'generics': path.resolve(__dirname, 'src/components/generics/'),
      'mixins': path.resolve(__dirname, 'src/components/mixins/')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        loader: 'url-loader',
        options: {
          limit: 10000,
        }
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
              fiber: require('fibers'),
              indentedSyntax: true
            },
            options: {
              implementation: require('sass'),
              sassOptions: {
                fiber: require('fibers'),
                indentedSyntax: true
              },
            },
          },
        ],
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new VuetifyLoaderPlugin()
  ]
}

Это мой main.js файл:

import Vue from 'vue'
import App from './App'
import router from './router'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')

Это мой package.json файл:

{
  "name": "vuetify-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "webpack --config webpack.config.js",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuetify": "^2.2.18"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.0",
    "@vue/cli-plugin-eslint": "^3.12.0",
    "@vue/cli-plugin-unit-jest": "^3.12.0",
    "@vue/cli-service": "^3.12.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "css-loader": "^3.4.2",
    "deepmerge": "^4.2.2",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "fibers": "^4.0.2",
    "file-loader": "^6.0.0",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "url-loader": "^4.0.0",
    "vue-cli-plugin-vuetify": "^2.0.5",
    "vue-loader": "^15.9.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.4.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Спасибо за вашу помощь. Может быть, я забыл что-то, чтобы быть на 100% ясным, скажите, если это так, и я буду обновлять.

Может быть, я тоже должен написать разные вопросы? Но я пока не знаю, связаны ли они или нет.