我正在尝试重写配置不佳的 package.json，删除 node_modules，删除 ~/.cache，从头开始
package.json
{
"name": "billing",
"version": "0.1.0",
"private": true,
"description": "A Vue.js project using Babel",
"author": "Alex Povolotsky <tarkhil@over.ru>",
"scripts": {
"serve": "vue-cli-service serve",
"build": "webpack",
"lint": "vue-cli-service lint",
"postmerge": "./script/post_merge_hook.sh"
},
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "^3.4.1",
"jquery": "^3.5.1",
"moment": "^2.29.1",
"uiv": "^1.1.5",
"vue": "^2.6.12",
"vue-class-component": "^7.2.6",
"vue-month-picker": "^1.4.0",
"vue-property-decorator": "^9.1.2",
"vue-quick-edit": "^1.3.0",
"vue-router": "^3.4.9",
"vuejs-auto-complete": "^0.9.0",
"vuejs-datepicker": "^1.6.2",
"vuescroll": "^4.17.2",
"vuex": "^3.6.0"
},
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"css-loader": "^5.0.1",
"dotenv-webpack": "^6.0.0",
"eslint": "^7.16.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^5.0.0",
"html-webpack-plugin": "^4.5.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"ts-loader": "^8.0.12",
"typescript": "^4.1.3",
"url-loader": "^4.1.1",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.2"
}
}
webpack.config.js
const resolve = require('path').resolve;
const Dotenv = require('dotenv-webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
mode: process.env.NODE_ENV,
entry: {
/* bill_info: './src/BillInfo.vue', */
ajax_info: './src/ajax_info.js',
ajax_bill: './src/ajax_bill.js',
ajax_tariffs: './src/ajax_tariffs.js',
receipts: './src/receipts.js',
monthly_unsent: './src/unsent.js',
monthly_dashboard: './src/monthly_dashboard.js',
// client_display: './src/client-display.js', // to add later
},
output: {
filename: '[name].js',
path: resolve('public/assets/js'),
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
}
}
},
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
corejs: 3,
useBuiltIns: "usage",targets: "defaults" }]
],
// "plugins": [
// "@babel/plugin-transform-spread"
// ],
}
},
},
{
test: /\.css$/i,
use: ['vue-style-loader', 'style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: ['url-loader?limit=100000'] },
],
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin(),
new Dotenv(),
],
resolve: {
alias: {
src: resolve(__dirname, "src"),
'vue$': 'vue/dist/vue.esm.js'
}
},
devtool: 'eval-source-map',
};
if (process.env.NODE_ENV === 'production') {
webpackConfig.devtool = '#source-map';
webpackConfig.plugins = (webpackConfig.plugins || []).concat([
// Short-circuit all warning code.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
// Minify with dead-code elimination.
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
},
parallel: true
})
]);
}
webpack --mode=development 结果
[webpack-cli] Error: Compiling RuleSet failed: Unexpected property test in condition (at ruleSet[1].rules[1].resource.test: resource => {
currentResource = resource
return true
})
at RuleSetCompiler.error (/home/tarkhil/node_modules/webpack/lib/rules/RuleSetCompiler.js:365:10)
at RuleSetCompiler.compileCondition (/home/tarkhil/node_modules/webpack/lib/rules/RuleSetCompiler.js:301:17)
at /home/tarkhil/node_modules/webpack/lib/rules/BasicMatcherRulePlugin.js:29:40
at Hook.eval [as call] (eval at create (/home/tarkhil/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:17:1)
at RuleSetCompiler.compileRule (/home/tarkhil/node_modules/webpack/lib/rules/RuleSetCompiler.js:175:19)
at /home/tarkhil/node_modules/webpack/lib/rules/RuleSetCompiler.js:152:9
at Array.map (<anonymous>)
at RuleSetCompiler.compileRules (/home/tarkhil/node_modules/webpack/lib/rules/RuleSetCompiler.js:151:16)
at RuleSetCompiler.compileRule (/home/tarkhil/node_modules/webpack/lib/rules/RuleSetCompiler.js:182:30)
at /home/tarkhil/node_modules/webpack/lib/rules/RuleSetCompiler.js:152:9
at Array.map (<anonymous>)
at RuleSetCompiler.compileRules (/home/tarkhil/node_modules/webpack/lib/rules/RuleSetCompiler.js:151:16)
at RuleSetCompiler.compile (/home/tarkhil/node_modules/webpack/lib/rules/RuleSetCompiler.js:68:22)
at new NormalModuleFactory (/home/tarkhil/node_modules/webpack/lib/NormalModuleFactory.js:198:34)
at Compiler.createNormalModuleFactory (/home/tarkhil/node_modules/webpack/lib/Compiler.js:948:31)
at Compiler.newCompilationParams (/home/tarkhil/node_modules/webpack/lib/Compiler.js:967:30)
我永远无法理解缺少什么，也无法用谷歌搜索任何有意义的东西
我被要求添加更多细节，但我的问题非常简单。使用此配置，此命令会立即失败并显示此错误。我只是没有看到任何用简单的人类语言来澄清情况
答案 0 :(得分：1)
我今天遇到了同样的问题，我通过将 url-loader 模块更新到版本 4.1.1 并更改以下行来修复：
旧：
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: ['url-loader?limit=100000'] }
新：
{ test: /\.(png|woff|woff2|eot|}ttf|svg)$/, use: [{ loader: 'url-loader, options: { limit: 100000 } }]