Question

我有一个非常奇怪的错误。我在这里提到的完全相同

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

Ii实现了解决方案，现在我的webpack看起来像这样

https://codepaste.net/8owse4

但现在我收到此错误

/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:60
    throw new Error("Element from loaders list should have one of the fields 'loader' or 'loaders'");
    ^

错误：来自加载器列表的元素应该有一个字段＆＃39; loader＆＃39;或者＆＃39;装载机＆＃39;

所以，我是一种循环。我正在使用webpack 2.我知道我必须重新配置webpack。但是，它的循环。它只是不工作。有人可以帮助我。

Answer 1

正如Doodlebot上面所述，webpack2 now uses module.rules代替module.loaders，但module.loaders仍可根据文档运作：

旧的加载程序配置被更强大的规则系统取代，该系统允许配置加载程序等。出于兼容性原因，旧的module.loaders语法仍然有效，并且解析旧名称。新的命名约定更容易理解，并且是将配置升级到使用module.rules的一个很好的理由。

所以这不是问题所在。如果您选择使用module.loaders，则需要将一组对象传递给它，并且每个对象必须有一个字段loader，如您的错误所示：

错误：来自加载器列表的元素应该有一个字段＆＃39; loader＆＃39;或者＆＃39;装载机＆＃39;

这就是您目前所拥有的：

＆＃13;

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'
    },
    devtool: '#source-map',
    //loaders
    module: {
        loaders: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    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: {
        query: {
          name:'assets/[name].[ext]'
        }
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        query: {
          mozjpeg: {
            progressive: true,
          },
          gifsicle: {
            interlaced: true,
          },
          optipng: {
            optimizationLevel: 7,
          }
        }
      }
    }]
  },

  
]
    }
};

＆＃13;

从那以后，您已将loader字段拼写为loaders

loaders: [ 'style-loader', 'css-loader' ]

那应该是

loader: ['style-loader', 'css-loader']

我也注意到你正在混合语法。如果您使用module.loaders，那么您的对象应该有test和loader，如果您使用module.rules，则您的对象有test和use。不要混合它们。以下是示例：

module{ loaders: [{test: /\.css$/, loader: [ 'style-loader', 'css-loader' ]}] }

module{ rules: [{test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}] }

您的use或loader字段可以带一个字符串（style-loader!css-loader）或数组（[ 'style-loader', 'css-loader' ]），但这不应该使您复数字段名称< / p>

Answer 2

查看Webpack 2的迁移指南我认为该错误来自module.loaders需要module.rules。 https://webpack.js.org/guides/migrating/

我在迁移您的配置文件时接受了通行证。

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'
    },
    devtool: '#source-map',
    //loaders
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: '/node_modules/',
                loader: 'babel-loader',
                options: {
                    presets: ['stage-0', 'react', 'es2015'],
                    plugins: ['transform-decorators-legacy', 'transform-class-properties']
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff2?)$/,
                loader: 'file?name=public/fonts/[name].[ext]'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'assets/[name].[ext]'
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true
                            },
                            gifsicle: {
                                interlaced: true
                            },
                            optipng: {
                                optimizationLevel: 7
                            }
                        }
                    }
                ]
            }
        ]
    }
};

不推荐使用png svg中的webpack错误警告

2 个答案: