vue.js - vuejs webpack npm run watch

Question

自从我从版本 Node (8 -> 14) 和 npm (6 -> 7) 升级以来，我遇到了问题。 现在，当我运行以下命令时:

npm run watch

我有以下错误:

[webpack-cli] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.optimization.splitChunks should be one of these:
   false | object { automaticNameDelimiter?, automaticNameMaxLength?, cacheGroups?, chunks?, enforceSizeThreshold?, fallbackCacheGroup?, filename?, hidePathInfo?, maxAsyncRequests?, maxInitialRequests?, maxSize?, minChunks?, minSize?, name? }
   -> Optimize duplication and caching by splitting chunks by shared modules and cache group
   Details:
    * configuration.optimization.splitChunks.cacheGroups['styles-public\css\web\***\app'] has an unknown property 'type'. These properties are valid:
      object { automaticNameDelimiter?, automaticNameMaxLength?, automaticNamePrefix?, chunks?, enforce?, enforceSizeThreshold?, filename?, maxAsyncRequests?, maxInitialRequests?, maxSize?, minChunks?, minSize?, name?, priority?, reuseExistingChunk?, test? }
    * configuration.optimization.splitChunks.cacheGroups['styles-public\css\pro\***\app'] has an unknown property 'type'. These properties are valid:
      object { automaticNameDelimiter?, automaticNameMaxLength?, automaticNamePrefix?, chunks?, enforce?, enforceSizeThreshold?, filename?, maxAsyncRequests?, maxInitialRequests?, maxSize?, minChunks?, minSize?, name?, priority?, reuseExistingChunk?, test? }
 - configuration.output.chunkFilename should be a string.
   -> The filename of non-entry chunks as relative path inside the `output.path` directory.
 - configuration.stats has an unknown property 'preset'. These properties are valid:
   object { all?, assets?, assetsSort?, builtAt?, cached?, cachedAssets?, children?, chunkGroups?, chunkModules?, chunkOrigins?, chunks?, chunksSort?, colors?, context?, depth?, entrypoints?, env?, errorDetails?, errors?, exclude?, excludeAssets?, excludeModules?, hash?, logging?, loggingDebug?, loggingTrace?, maxModules?, moduleAssets?, moduleTrace?, modules?, modulesSort?, nestedModules?, optimizationBailout?, outputPath?, performance?, providedExports?, publicPath?, reasons?, source?, timings?, usedExports?, version?, warnings?, warningsFilter? }
npm ERR! code 2
npm ERR! path C:\wamp64\www\app
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js --watch

我删除了我的node_modules目录。 我重新安装了一切。我仍然有错误。 你知道它从哪里来吗？

请参阅下面的 package.json 文件和 webpack.mix.js 文件。

package.json

{
    "name": "app",
    "version": "1.0.0",
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "cross-env": "^7.0.3",
        "jquery": "^3.5.1",
        "laravel-mix": "^6.0.13",
        "lodash": "^4.17.15",
        "opn": "^6.0.0",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.26.8",
        "sass-loader": "^7.3.1",
        "vue-template-compiler": "^2.6.11",
        "webpack": "^4.46.0",
        "webpack-cli": "^4.5.0",
        "webpack-serve": "^3.2.0"
    },
    "dependencies": {
        "@ckeditor/ckeditor5-build-classic": "^20.0.0",
        "@ckeditor/ckeditor5-image": "^20.0.0",
        "@ckeditor/ckeditor5-vue": "^1.0.1",
        "@fortawesome/fontawesome-free": "^5.15.2",
        "@fortawesome/fontawesome-svg-core": "^1.2.34",
        "@fortawesome/free-solid-svg-icons": "^5.15.2",
        "@fortawesome/vue-fontawesome": "^2.0.2",
        "@fullcalendar/bootstrap": "^5.3.0",
        "@fullcalendar/core": "^5.3.0",
        "@fullcalendar/daygrid": "^5.3.0",
        "@fullcalendar/interaction": "^5.3.0",
        "@fullcalendar/timegrid": "^5.3.0",
        "@fullcalendar/vue": "^5.3.0",
        "axios": "^0.21.1",
        "bootstrap": "^4.6.0",
        "bootstrap-vue": "^2.15.0",
        "es6-promise": "^4.2.8",
        "fullcalendar": "^5.1.0",
        "mapbox-gl": "^0.53.1",
        "moment": "^2.27.0",
        "npm": "^7.6.3",
        "v-calendar": "^1.0.0-beta.23",
        "vee-validate": "^3.3.7",
        "vue": "^2.6.12",
        "vue-analytics": "^5.22.1",
        "vue-i18n": "^8.23.0",
        "vue-mapbox": "^0.4.1",
        "vue-phone-number-input": "^1.1.10",
        "vue-recaptcha": "^1.3.0",
        "vue-router": "^3.3.4",
        "vue-select": "^3.11.2",
        "vue-swatches": "^2.1.0",
        "vuex": "^3.5.1",
        "vuex-persist": "^2.2.0"
    }
}

webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
    .js('resources/js/app.js', 'public/js')
    .webpackConfig({
        resolve: {
            alias: {
                '@components': path.resolve(__dirname, 'resources/js/components/'),
                '@router': path.resolve(__dirname, 'resources/js/router/'),
                '@store': path.resolve(__dirname, 'resources/js/store/')
            }
        }
    });

谢谢。

Answer 1

1. 你有 npm watch npm install npm-watch

有一些安装额外的插件， 在package.json

中

"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"watch": "vue-cli-service build --watch",
"dev": "vue-cli-service build --mode development"
},

在package.json中，您添加了"watch": "npm-watch",

观看脚本:

{
  "watch": {
    "test": "{src,test}/*.js"
  },
  "scripts": {
    "test": "tape test/*.js",
    "watch": "npm-watch"
  }
}