babeljs - 如何解决Webpack 2 loaderUtils.parseQuery()警告？

当我使用Webpack2编译文件时。它显示以下警告:



我检查了github页面，但没有找到如何解决此问题的方法。这是我的配置:

// webpack 2 configuration
// https://webpack.js.org/guides/migrating/

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

module.exports = {
    watch: true,
  inline: true,
  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, './app'),
    ],
    //http://webpack.github.io/docs/configuration.html#resolve-alias
    alias: {
      lib: path.resolve('./lib'),
      res: path.resolve('./res'),
      style: path.resolve('./style'),
      //make sure it can be load by 'jquery'
      jquery$: 'jquery',
      // 01/26/2017 http://isotope.metafizzy.co/extras.html#webpack
      masonry: 'masonry-layout',
      isotope: 'isotope-layout'
    },
    extensions: ['.js', '.json', '.jsx', '.css'],
  },
  devtool: 'source-map',
  target: 'web', // enum

    entry: {
    // entry points
    app: path.resolve('./app') + '/' + 'main.js',
    //for basic stable library only
    vendor: ['babel-polyfill', 'jquery', 'lodash', 'react', 'react-dom', 'bootstrap-sass', path.resolve('./app') + '/' + 'vendor.js'],
  },
  output: {path: path.resolve('./script'), publicPath:'script/', filename: '[name].js', /*chunkFilename: '[id].js'*/},
  module: {
    rules: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        // test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
        // loader: 'file'
        // https://github.com/webpack/webpack/issues/597
        test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
        loader: 'url-loader'
      },
      // NOTICE: png / jpg needs specific loaders, see https://github.com/webpack-contrib/css-loader
      {
        test: /\.png$/,
        loader: 'url-loader',
        options: {limit: 100000},
      },
      {
        test: /\.jpg$/,
        loader:'file-loader'
      },
      {
        test: /\.s?css$/,
        // https://css-tricks.com/css-modules-part-2-getting-started/
        // css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader!sass-loader',
        })
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({name:'vendor', filename:'vendor.js'}),
    //export to global for bootstrap and etc. (needs jquery ^2.0)
    new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'}),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
      output: {
        comments: false,
      }
    }),
    // http://webpack.github.io/docs/stylesheets.html
    // https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle
    new ExtractTextPlugin({filename: '[name].css'}),
    new webpack.LoaderOptionsPlugin({
      debug: true,
      // test: /\.xxx$/, // may apply this only for some modules
      options: {
        // for @import path in the style file
        sassLoader: {includePaths: [path.resolve('./style') + '/']}
      }
    }),
  ]
};

任何想法将不胜感激。

最佳答案

加载程序使用loaderUtils.parseQuery()来获取传递给加载程序的选项。它已被替换为 loaderUtils.getOptions() 。您可能正在使用仍然使用parseQuery的加载器。您在webpack配置中使用的所有加载程序应已更改为使用getOptions，但您可能正在使用旧版本的加载程序，但未包含此更改。要解决此问题，您只需将装载机升级到最新版本即可。

如果出于某种原因您不想升级所有加载程序，则可以在webpack配置文件中添加以下行(不是一个选项):

process.traceDeprecation = true;

这将为您提供堆栈跟踪，其中使用了parseQuery，因此您可以标识实际使用它的加载器并升级该特定加载器。

事实证明，最新的babel-loader仍在使用parseQuery，它将在下一个主要版本中进行更改，并且已在v7.0.0-alpha中提供。但是，如果您不想使用Alpha版本，则必须忍受警告，直到v7.0.0出现。