我最近尝试使用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'
});
}
上面的文件有问题吗？还是问题在其他地方仍然存在？