Webpack错误:规则只能有一个结果源(提供use和loaders)

4
这个Webpack错误表示什么?
Error: Rule can only have one result source (provided use and loaders) in {
  "test": {},
  "loaders": [
    "style-loader",
    {
      "loader": "css-loader",
      "options": {
        "importLoaders": 1
      }
    },
    {
      "loader": "postcss-loader",
      "options": {
        "plugins": [
          null
        ]
      }
    }
  ],
  "use": [
    "style-loader",
    "vue-style-loader",
    {
      "loader": "css-loader",
      "options": {
        "importLoaders": 1
      }
    },
    {
      "loader": "postcss-loader",
      "options": {
        "plugins": [
          null
        ]
      }
    }
  ]
}

以下是我的webpack.config.js文件:

const path = require('path');
const package = require('./package');

module.exports = {
    mode: 'development',
    resolve: {
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            // this will apply to both plain `.js` files
            // AND `<script>` blocks in `.vue` files
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            // this will apply to both plain `.css` files
            // AND `<style>` blocks in `.vue` files
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.svg$/,
                include: [path.join(__dirname, 'public/icons/svg')],
                loaders: [{
                        loader: 'svg-sprite-loader',
                        options: {
                            symbolId: '[name]',
                        },
                    },
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'public/[name].[ext]?[hash]',
                        }
                    },
                    {
                        loader: 'img-loader',
                    }
                ]
            },
            {
                test: /\.(ttf|woff)$/i,
                loader: 'file-loader',
            },
            {
                test: /\.(md|yml)$/,
                loader: 'null-loader'
            }
        ],
    }
};

你在什么时候遇到了这个错误?也许可以复制一下。 - DAVID AJAYI
2个回答

1
可能存在webpack版本问题。尝试切换到较低的版本。
npm uninstall webpack
npm install webpack@^4.0.0 --save-dev

0

或者将 css-loader 降级到 3.6 版本,这对我有效:

npm uninstall css-loader
npm install css-loader@3.6.0

使用postcss-loader降级到3.0版本

npm uninstall postcss-loader
npm install postcss-loader@3.0.0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接