Laravel Mix：npm run dev 和 npm run watch 错误-> configuration.loader 应该是一个对象

问题描述

我最近尝试使用 npm run watch 和 npm run dev 在开发平台上编译我的文件，但两者都给了我如下错误：

[webpack-cli] 无效的配置对象。已使用与 API 架构不匹配的配置对象初始化 Webpack。

configuration.loader 应该是一个对象：目的 { … } -> 加载程序上下文中可用的自定义值。

我不知道是什么原因造成的，我尝试搜索，但在网络上没有找到解决方案。

package.json

{
    "private": true,"scripts": {
        "dev": "npm run development","development": "mix","watch": "mix watch","watch-poll": "mix watch -- --watch-options-poll=1000","hot": "mix watch --hot","prod": "npm run production","production": "mix --production"
    },"devDependencies": {
        "@popperjs/core": "^2.0.6","@vue/test-utils": "^1.1.2","alpinejs": "^3.2.2","axios": "^0.21.1","babel-core": "^7.0.0-bridge.0","babel-jest": "^26.6.3","babel-loader": "^8.2.1","babel-preset-env": "^1.7.0","bootstrap": "^5.0.1","cross-env": "^7.0","cross-var": "^1.1.0","css-loader": "^5.2.7","jest": "^26.6.3","jquery": "^3.5.1","laravel-mix": "^6.0.25","livewire-vue": "^0.3.1","lodash": "^4.17.21","perfect-scrollbar": "^1.5.0","popper.js": "^1.16.1","pusher-js": "^7.0.3","resolve-url-loader": "^3.1.2","sass": "^1.32.8","sass-loader": "^12.1.0","socket.io-client": "^3.1.2","webpack": "^5.46.0","webpack-cli": "^4.7.2"
    },"jest": {
        "testURL": "http://localhost","roots": [
            "<rootDir>/tests/Javascript/"
        ],"moduleNameMapper": {
            "^@/(.*)$": "<rootDir>/resources/js/$1"
        },"modulefileExtensions": [
            "js","vue"
        ],"transform": {
            "^.+\\.js$": "babel-jest",".*\\.(vue)$": "vue-jest"
        }
    },"dependencies": {
        "@babel/polyfill": "^7.12.1","@chakra-ui/vue": "^0.6.6","@emotion/core": "^11.0.0","@emotion/react": "^11.1.1","@emotion/styled": "^11.0.0","acorn": "^8.0.4","babel-preset": "^1.1.7","bootstrap-icons": "^1.5.0","bootstrap-vue": "^2.19.0","bufferutil": "^4.0.2","canvas": "^2.6.1","clipboard": "^2.0.6","copy-webpack-plugin": "^9.0.1","core-js": "^3.7.0","emotion": "^10.0.27","formBuilder": "^3.6.1","html2canvas": "^1.0.0-rc.7","imagemagick": "^0.1.3","intersection-observer": "^0.11.0","js-cookie": "^2.2.1","lodash.remove": "^4.7.0","node-sass": "^6.0.0","portal-vue": "^2.1.7","react": "^17.0.1","regenerator-runtime": "^0.13.7","utf-8-validate": "^5.0.3","webrtc-adapter": "^7.7.0","yargs-parser": "^20.2.4"
    },"resolutions": {
        "yargs-parser": "^19.0.1"
    }
}

更新：添加了 webpack.mix.js

webpack.mix.js

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

mix.setPublicPath('public')
    .setResourceRoot('../')
    .vue()
    .sass('resources/sass/frontend/app.scss','css/frontend.css')
    .sass('resources/sass/backend/app.scss','css/backend.css')
    .js('resources/js/frontend/app.js','js/frontend.js')
    .js([
        'resources/js/backend/before.js','resources/js/backend/app.js','resources/js/backend/after.js'
    ],'js/backend.js')
    .js('resources/js/global.js','js/global.js')
    .js('resources/js/Banners/banner.js','js/banner.js')
    .extract([
        // Extract packages from node_modules to vendor.js
        'alpinejs','jquery','bootstrap','popper.js','axios','sweetalert2','lodash'
    ])
    .sourceMaps();

if (mix.inProduction()) {
    mix.version();
} else {
    // Uses inline source-maps on development
    mix.webpackConfig({
        loader: 'url-loader',devtool: 'inline-source-map'
    });
}

上面的文件有问题吗？或者问题在其他地方仍然存在？

解决方法

在 webpack.mix.js 中只需删除 loader: 'url-loader' 对我有用

laravel laravel laravel-mix npm npm npm webpack-cli