webpack-cli 错误:编译规则集失败 [英] webpack-cli Error: Compiling RuleSet failed

查看:183
本文介绍了webpack-cli 错误:编译规则集失败的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试重写配置不佳的 package.json,删除 node_modules,删除 ~/.cache,从头开始

I'm trying to rewrite a poorly configured package.json, removed node_modules, removed ~/.cache, started from scratch

package.json

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

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 --mode=development results in

[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)

我永远无法理解缺少什么,也无法用谷歌搜索任何有意义的东西

I could never understand what's missing nor google anything meaningful

我被要求添加更多细节,但我的问题非常简单.使用此配置,此命令会立即失败并显示此错误.我只是没有看到任何用简单的人类语言来澄清情况

I was asked to add more detail, but my question is dead simple. With this config, this command fails at once with this error. I just don't see anything in plain human words to clarify the situation more

推荐答案

我今天遇到了同样的问题,我通过将 url-loader 模块更新到版本 4.1.1 并更改以下行来解决:

I had the same issue today and I fixed by updating the url-loader module to the version 4.1.1, and by changing the following line:

旧:

{ 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 } }]

这篇关于webpack-cli 错误:编译规则集失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆