网络包 2 : Error: options/query cannot be used with loaders (use options for each array item)

标签 webpack webpack-2

我正在尝试为 .png/.ttf 加载添加查询作为 webpack 否则在升级到 webpack 2 后编译时会警告我弃用。

这是我的配置。如何正确添加照片和字体的查询?

const ExtractTextPlugin = require("extract-text-webpack-plugin");

var webpack = require("webpack");

module.exports = {
    entry: {
        dashboard: './js/main.js',
        vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap", "vis"],
    },
    output: { path: "../public", filename: 'bundle.js' },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: "static/vendor.bundle.js"}),
        new ExtractTextPlugin("/static/[name].css"),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
    ],

    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: [
                        'es2015', 'react', 'stage-0',
                    ],

            }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}),
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file-loader?hash=sha512&digest=hex&name=~/.local/share/Trash/[hash].[ext]',
                    'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false', {
                        loader: 'image-webpack-loader',
                    },
                ],
                query: {
                    gifsicle: {
                        interlaced: false,
                    },
                    optipng: {
                        optimizationLevel: 4,
                    },
                    pngquant: {
                        quality: '75-90',
                        speed: 3,
                    },
                }

            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader?name=~/.local/share/Trash/[name].[ext]'
            }
        ]
    },
};

最佳答案

我的 webpack 配置中有这个片段

 { test: /\.(ts|tsx)$/,
  loader: ['ts-loader'],
  options: { appendTsSuffixTo: [/\.vue$/] } }, 

当我删除 'ts-loader' 周围的 [] 时,错误消失了,例如
 { test: /\.(ts|tsx)$/,
  loader: 'ts-loader',
  options: { appendTsSuffixTo: [/\.vue$/] } }, 

我认为该消息是说您不能对多个加载程序使用选项/查询。它不能是一个数组,它必须是一个单一的加载器。

关于网络包 2 : Error: options/query cannot be used with loaders (use options for each array item),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42220851/

相关文章:

angular - 模块解析失败 : . .. 意外标记。您可能需要适当的加载程序来处理此文件类型

npm - 如何在 webpack 中使用快捷方式路径 "@"?

webpack - Vue 不是构造函数

node.js - 无效的配置对象。 Webpack 已使用与 Angular V4.0.0 中的 API 模式 2 不匹配的配置对象进行初始化

webpack-2 - 如何让 webpack2 和 underscore-template loader + babel 在严格模式下不使用 "Module build failed: SyntaxError: ' 工作(5 :0)"

jquery - 尽管安装了 JQuery 和 Bootstrap,但工具提示仍不起作用

javascript - 构建模块以在没有模块的环境中使用它

javascript - Webpack 不会捆绑 less 到 css 吗?

webpack - 将引导代码包含在两个不同的 block 中

javascript - 当文件名通过 props 传递时,React 组件无法动态 require() 图像文件