无法在加载器列表中定义“查询”和多个加载器，webpack错误

时间：2017-03-30 19:10:41

标签： webpack

我收到此错误

/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:54
            if(!element.loader || element.loader.indexOf("!") >= 0) throw new Error("Cannot define 'query' and multiple loaders in loaders list");
                                                                    ^

Error: Cannot define 'query' and multiple loaders in loaders list
at getLoadersFromObject (/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:54:65)
at LoadersList.<anonymous> (/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:78:12)

我被弃用了警告

Webpack 2: WARNING in .png, .svg, .. DEPRECATED. Configure optipng's optimizationLevel option in it's own options. (optipng.optimizationLevel)

继上面的帖子之后

。我在webpack中引入了option属性。这是我的webpack配置

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: { app: './src/app.js' },
  output: {
    filename: 'public/build/bundle.js',
    sourceMapFilename: 'public/build/bundle.map'
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        query: {
          presets: ['stage-0', 'react', 'es2015'],
          plugins: ['transform-decorators-legacy', 'transform-class-properties']
        }
      },
      { test: /\.css$/, loaders: ['style-loader', 'css-loader'] },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file?name=public/fonts/[name].[ext]'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'file?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ],

        options: {
          query: {
            mozjpeg: {
              progressive: true
            },
            gifsicle: {
              interlaced: true
            },
            optipng: {
              optimizationLevel: 7
            }
          }
        }
      }
    ]
  }
};

但我仍然遇到了这个错误。

编辑1 - 迈克尔回答后

我仍然有错误，这是我的webpack现在

    var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
  entry: {app: './src/app.js' },
  output: {filename: 'public/build/bundle.js',
        sourceMapFilename: 'public/build/bundle.map' },
  module: {
    loaders: [
      { test: /\.(js|jsx)$/, loader: 'babel-loader',query: {
        presets: ['stage-0','react','es2015'],
        plugins: ["transform-decorators-legacy","transform-class-properties"]
    } },
      { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },
      { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=public/fonts/[name].[ext]'  },
      {
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[sha512:hash:hex].[ext]'
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
        mozjpeg: {
          progressive: true
        },
        gifsicle: {
          interlaced: true
        },
        optipng: {
          optimizationLevel: 7
        }
      }
    }
  ]
}
    ]
  }
}

错误现在看起来像这样

    ERROR in ./public/imgs/common/jcrop/Jcrop.gif
Module parse failed: /home/ubuntu/workspace/node_modules/image-webpack-loader/index.js!/home/ubuntu/workspace/public/imgs/common/jcrop/Jcrop.gif Unexpected character ' (1:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character ' (1:6)
    at Parser.pp$4.raise (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.pp$7.next (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:2413:10)
    at Parser.pp$3.parseIdent (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:2191:10)
    at Parser.pp$3.parseExprAtom (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1774:21)
    at Parser.pp$3.parseExprSubscripts (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/home/ubuntu/workspace/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/home/ubuntu/workspace/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/home/ubuntu/workspace/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at /home/ubuntu/workspace/node_modules/image-webpack-loader/index.js:71:9
 @ ./~/css-loader!./src/main-blessed3.css?z=1490800022920 6:271558-271606

1 个答案:

答案 0 :(得分：0)

问题是你的最后一条规则：

{
  test: /\.(jpe?g|png|gif|svg)$/i,
  loaders: [
    'file?hash=sha512&digest=hex&name=[hash].[ext]',
    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
  ],

  options: {
    query: {
      mozjpeg: {
        progressive: true
      },
      gifsicle: {
        interlaced: true
      },
      optipng: {
        optimizationLevel: 7
      }
    }
  }
}

您可以在规则上定义选项，但是您有多个加载器。这是不允许的，只有当它是单个加载器（作为快捷方式）时才有效，否则您需要直接在加载器上指定选项而不是规则。加载程序甚至不能在webpack 2中工作，因为您已经不再使用webpack 2中不再允许的-loader后缀（如Automatic -loader module name extension removed所示）。

也不要使用内联查询选项，在加载器上使用options（出于兼容性原因，query存在，并且应首选options）。由于内联配置，您会收到弃用警告，因为您仍然可以在此处设置选项。此外，您的file-loader选项不正确，哈希的类型在name选项中使用[<hashType>:hash:<digestType>:<length>]指定，如Filename template placeholders中所述。

上述规则的正确和干净版本是：

{
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[sha512:hash:hex].[ext]'
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
        mozjpeg: {
          progressive: true
        },
        gifsicle: {
          interlaced: true
        },
        optipng: {
          optimizationLevel: 7
        }
      }
    }
  ]
}

顺便说一下，你还在另一条规则中指定了.svg（对于你的字体），这可能会产生不必要的影响，你应该只有一条匹配它的规则。

相关问题
最新问题