【问题标题】:Laravel Mix: npm run dev and npm run watch error-> configuration.loader should be an objectLaravel Mix: npm run dev 和 npm run watch error-> configuration.loader 应该是一个对象
【发布时间】:2021-10-01 18:18:43
【问题描述】:

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

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

  • 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 文件吗?您可以在项目的根目录中找到它。
  • @MohKoma 上面已经更新了
  • 请检查:stackoverflow.com/questions/42060243/… 您可以尝试多个答案,看看是否有帮助

标签: node.js laravel npm laravel-mix webpack-cli


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 2020-03-02
    • 1970-01-01
    • 2020-10-01
    • 2017-09-22
    • 1970-01-01
    • 2021-01-31
    • 2017-10-22
    • 1970-01-01
    • 2020-11-17
    相关资源
    最近更新 更多