Laravel Mix：npm run dev 和 npm run watch 錯誤-> configuration.loader 應該是一個對象

Question

我最近嘗試使用npm run watch和npm run dev在開發平台上編譯我的文件，但兩者都給了我如下錯誤：

[webpack-cli] 無效的配置對象。 Webpack 已使用與 API 架構不匹配的配置對象進行初始化。

• configuration.loader 應該是一個對象： object { ... } -> 加載器上下文中可用的自定義值。

我不確定是什么原因造成的，我嘗試搜索，但在網絡上沒有找到解決方案。

包.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'
    });
}

上面的文件有問題嗎？ 或者問題在其他地方仍然存在？

Answer 1

在 webpack.mix.js 中只需刪除loader: 'url-loader'它對我有用