wake-up-neo.net

Webpack - Fehler: 'Abfrage' und mehrere Lader können nicht in der Laderliste definiert werden

Der Fehler trat auf, nachdem ich den "Reaktiv-Heiß" -Ladeprogramm in Array hinzugefügt hatte. Ich habe folgende Tutorials befolgt: https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement Ich erhalte jedoch 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()
  ]
};
44
Rahul Dagli

Es scheint, dass die Abfrage eine alternative Möglichkeit ist, das Verhalten eines single - Laders anzupassen, der sauberer ist als die Angabe dieser Parameter inline (siehe unten). Wenn mehrere Loader vorhanden sind, weiß Webpack nicht, für welche Konfiguration die query gilt.

Folgendes sollte Ihr Problem lösen:

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

EDIT: Während diese Lösung für Webpack 1 funktioniert, finden Sie weitere Antworten auf Cleaner-Lösungen, die in neueren Versionen funktionieren.

76

Meine Lösung: 

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

In webpack 2 & 3 kann dies wesentlich sauberer konfiguriert werden.

Lader können in einem Array von Ladeobjekten übergeben werden. Jedes Loader-Objekt kann ein options-Objekt angeben, das wie das Webpack 1 query für diesen bestimmten Loader fungiert.

Verwenden Sie beispielsweise react-hot-loader und babel-loader, wobei babel-loader mit einigen Optionen in webpack 2/3 konfiguriert ist.

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'
        ]
      }
    }]
  }] 
}

Zum Vergleich ist hier die gleiche Konfiguration in webpack 1 mit der Query-String-Methode enthalten.

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

Beachten Sie die geänderten Eigenschaftsnamen in der gesamten Kette. 

Beachten Sie auch, dass ich in der Konfiguration von es2015 die Voreinstellung es2015-native-modules in babel-loader geändert habe. Dies hat nichts mit der Spezifikation von options zu tun. Es ist nur so, dass Sie mit der Verwendung von es6-Modulen die in v2 eingeführte Webpack-Tree-Shaking-Funktion verwenden können. Es könnte alleine gelassen werden und es würde noch funktionieren, aber die Antwort würde sich unvollständig anfühlen, ohne dass auf das offensichtliche Upgrade hingewiesen wird :-)


Haftungsausschluss: Dies ist das gleiche wie meine Antwort auf eine ähnliche Frage , aber diese Frage hat ähnliche Bewertungen/Ansichten/Google-Ranking, daher werde ich die Antwort hier posten.


10
davnicwil

Für Webpack 2 . Ich schaffe es so zu konfigurieren:



    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

Ich hatte das gleiche Problem, seit ich eine Lösung für mich gefunden hatte. du kannst es versuchen:

--- hier ist die Lösung ---

Wenn Sie "Voreinstellungen" in der Datei ".babelrc" Definiert haben, müssen Sie sie nicht in der Datei "webpack.config.js" angeben. Dann löschen Sie sie und es funktioniert gut


und wenn nicht, Ich empfehle Ihnen, zu Ihrer ".babelrc" -Datei zu gehen und dort Ihre Voreinstellungen anzugeben

0
ab_did96

Diese Lösung hat für mich funktioniert:

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

und Voreinstellungen in der .babelrc

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

siehe https://webpack.github.io/docs/usage.html

0
Sajidur Rahman