如何解决Webpack 2 loaderUtils.parseQuery()警告? [英] How to resolve the Webpack 2 loaderUtils.parseQuery() Warning?

问题描述

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

When I compiled my files by using Webpack2. It showed the following warning:

"loaderUtils.parseQuery()接收到一个非字符串值，该值可以是 有问题的，请参见 https://github.com/webpack/loader-utils/issues/56 "

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

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

I checked the github page and did not find out how to resolve this problem. This is my config:

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

任何想法都会受到赞赏.

Any thoughts will be appreciated.

推荐答案

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

loaderUtils.parseQuery() is used by loaders to get the options that are passed to the loader. It has been replaced with loaderUtils.getOptions(). You are probably using a loader that still uses parseQuery. All the loaders you're using in you webpack config should have changed to use getOptions, but you might be using an older version of them which doesn't include the change. To fix it you can simply upgrade your loaders to the latest version.

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

If for some reason you don't want to upgrade all loaders, you can add the following line inside the webpack config file (not as an option):

process.traceDeprecation = true;

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

This will give you a stack trace where parseQuery is used, so you can identify the loader that actually uses it and upgrade that particular one.

事实证明，最新的babel-loader仍使用parseQuery，它将在下一个主要版本中进行更改，并且已经在

It turns out that the latest babel-loader still uses parseQuery, it will be changed in the next major version and it's already available in v7.0.0-alpha. But if you don't want to use the alpha version you'll have to live with the warning until v7.0.0 comes out.

这篇关于如何解决Webpack 2 loaderUtils.parseQuery()警告?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！