web-dev-qa-db-fra.com

Webpack - Erreur: Impossible de définir "requête" et plusieurs chargeurs dans la liste des chargeurs

L'erreur est apparue après avoir ajouté le chargeur "react-hot" dans le tableau. J'ai suivi ce tutoriel: https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement cependant, je reçois 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()
  ]
};
javascriptreactjswebpackreact-hot-loader
44
Rahul Dagli

Il semble que la requête soit un moyen alternatif de personnaliser le comportement d'un chargeur single, plus propre que de spécifier ces paramètres en ligne (voir ci-dessous). Si plusieurs chargeurs sont présents, Webpack ne sait pas à quoi la configuration query s'applique.

Ce qui suit devrait résoudre votre problème:

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

EDIT: Bien que cette solution fonctionne pour Webpack 1, reportez-vous aux autres réponses pour connaître les solutions plus propres qui fonctionnent dans les versions les plus récentes.

76
Nikos Paraskevopoulos

Ma 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/
}
16
Ken Berkeley

Pour webpack 2 . Je parviens à configurer comme ceci:



    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']
                    }
                }
            ]
        }
    };
1
Andrzej Piotrowski

Je rencontrais le même problème depuis que je trouvais une solution pour moi-même. Tu peux l'essayer:

--- voici la solution ---

Si vous avez défini "presets" dans le fichier ".babelrc" .__, vous n'avez pas besoin de le spécifier dans le fichier "webpack.config.js", puis supprimez-le et tout fonctionnera bien.

et si vous ne le faites pas, je vous recommande d’aller dans votre fichier ".babelrc" et d’y spécifier vos presets

0
ab_did96

Cette solution a fonctionné pour moi:

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

et presets dans le .babelrc

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

veuillez vous référer à https://webpack.github.io/docs/usage.html

0
Sajidur Rahman