Question

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

＆＃34; loaderUtils.parseQuery（）收到一个非字符串值，可以是有问题，请参阅https://github.com/webpack/loader-utils/issues/56＆＃34;

我检查了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出现。

如何解决Webpack 2 loaderUtils.parseQuery（）警告？

1 个答案: