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

Question

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

"loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56"

我检查了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') + '/']}
      }
    }),
  ]
};

任何想法将不胜感激。

Answer 1

loaderUtils.parseQuery()加载器使用它来获取传递给加载器的选项。它已被替换为 loaderUtils.getOptions() .您可能正在使用仍在使用 parseQuery 的加载程序.您在 webpack 配置中使用的所有加载器都应该更改为使用 getOptions ，但您可能使用的是其中不包含更改的旧版本。要修复它，您只需将加载器升级到最新版本即可。

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

process.traceDeprecation = true;

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

原来最新的 babel-loader仍在使用 parseQuery ，它将在下一个主要版本中更改，并且已经在 v7.0.0-alpha 中可用。 .但是，如果您不想使用 alpha 版本，您将不得不忍受警告，直到 v7.0.0出来。