Webpack - Error: Cannot define 'query' and

问题:

The error appeared after I added 'react-hot' loader in array. I've followed this tutorials: https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement however, i'm getting Error: Cannot define 'query' and multiple loaders in loaders list.

var WebpackDevServer = require("webpack-dev-server");
var webpack = require('webpack');
var path = require('path');
require("babel-polyfill");

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src');

module.exports = {
  entry: [
    'babel-polyfill',
    'bootstrap-loader',
    'webpack/hot/dev-server',
    APP_DIR + '/import.js',
  ],
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel'],
      exclude: /node_modules/,
      query: {
        plugins: ['transform-runtime'],
        presets: ['es2015', 'stage-0', 'react']
      }
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }, {
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    }, {
      test: /\.(png|woff|woff2|eot|ttf|svg|jpg|gif)$/,
      loader: 'url-loader?limit=100000'
    }]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};

回答1:

It seems that the query is an alternative way of customizing the behaviour of a single loader, that is cleaner than specifying those parameters inline (see below). If multiple loaders are present, Webpack does not know to which the query configuration applies.

The following should solve your problem:

module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react,plugins[]=transform-runtime']
    }

---

EDIT: While this solution works for Webpack 1, see the other answers for cleaner solutions that work in more recent versions.

回答2:

My Solution:

loaders: [{
  test: /\.(js|jsx)$/,
  loaders: ['react-hot', 'babel?' + JSON.stringify({
    cacheDirectory: true,
    plugins: [
      'transform-runtime',
      'transform-decorators-legacy'
    ],
    presets: ['es2015', 'react', 'stage-0'],
    env: {
      production: {
        presets: ['react-optimize']
      }
    }
  }), 'eslint'],
  include: src,
  exclude: /node_modules/
}

回答3:

In webpack 2 & 3 this can be configured much more cleanly.

Loaders can be passed in an array of loader objects. Each loader object can specify an options object that acts like the webpack 1 query for that particular loader.

For example, using both react-hot-loader and babel-loader, with babel-loader configured with some options, in webpack 2/3

module: {
  rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    use: [{
      loader: 'react-hot-loader'
    }, {
      loader: 'babel-loader',
      options: {
        babelrc: false,
        presets: [
          'es2015-native-modules'
          'stage-0',
          'react'
        ]
      }
    }]
  }] 
}

For comparison, here is the same configuration in webpack 1, using the query string method.

module: {
  rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    loaders: [
      'react-hot',
      'babel-loader?' +
        'babelrc=false,' +
        'presets[]=es2015,' +
        'presets[]=stage-0,' +
        'presets[]=react'
      ]
  }] 
}

Notice the changed property names all down the chain.

Also, note that I changed the es2015 preset to es2015-native-modules preset in the babel-loader configuration. This has nothing to do with the specification of options, it's just that including es6 modules allows you to use webpack tree-shaking feature introduced in v2. It could be left alone and it would still work, but the answer would feel incomplete without that obvious upgrade being pointed out :-)

---

Disclaimer: This is the same as my answer to a similar question, but this question has similar votes/views/google ranking, so I'll post the answer here too.

---

回答4:

For webpack 2. I manage to configure like this:

    var webpack = require("webpack");
    var path = require("path");

    module.exports = {
        entry: "./src/index.js",
        output: {
            path: path.resolve(__dirname, "dist/assets"),
            filename: "bundle.js",
            publicPath: "/assets/"
        },
        devServer: {
            inline: true,
            contentBase: './dist',
            port: 3000
        },
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    loader: "babel-loader",
                    options: {
                        presets: ['latest', 'react', 'stage-0']
                    }
                }
            ]
        }
    };

回答5:

This solution worked for me:

module: {
        loaders:[
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader'
            }
        ]
    }

and presets in the .babelrc

{
    'presets': ['latest', 'react', 'stage-0']
}

please refer to https://webpack.github.io/docs/usage.html

回答6:

I had faced the same issue since I found a solution for myself. you can try it:

--- here is the solution ---

If you've defined "presets" in ".babelrc" file then you don't need to specify it in the "webpack.config.js" file, then delete it and it works well

---

and if you don't, I recommend you to go to your ".babelrc" file and specify your presets there