javascript - react - webpack-dev-server

Webpack-Error: No se puede definir ''query'' y varios cargadores en la lista de cargadores

Question

El error apareció después de que agregué el cargador ''react-hot'' en la matriz. Seguí estos tutoriales: https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement , sin embargo, estoy obteniendo un 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()
  ]
};

Answer 1

En el paquete web 2 y 3, esto se puede configurar de forma mucho más limpia.

Los cargadores se pueden pasar en una matriz de objetos de cargador. Cada objeto del cargador puede especificar un objeto de options que actúa como la query del paquete 1 para ese cargador en particular.

Por ejemplo, usar react-hot-loader y babel-loader , con babel-loader configurado con algunas opciones, en 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''
        ]
      }
    }]
  }] 
}

Para comparación, aquí está la misma configuración en el paquete web 1 , utilizando el método de cadena de consulta.

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

Observe los nombres de propiedad cambiados en toda la cadena.

Además, tenga en cuenta que cambié el preajuste es2015 a es2015-native-modules preset en la configuración babel-loader . Esto no tiene nada que ver con la especificación de options , es solo que incluir los módulos es6 le permite usar la característica de sacudida de árboles en el paquete web presentada en v2. Se podría dejar en paz y funcionaría, pero la respuesta sería incompleta sin que se indique la actualización obvia :-)

Descargo de responsabilidad: Esto es lo mismo que mi respuesta a una pregunta similar , pero esta pregunta tiene votos / vistas / clasificación de google similares, por lo que también publicaré la respuesta aquí.

Answer 2

Esta solución funcionó para mí:

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

y presets en el .babelrc

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

por favor consulte https://webpack.github.io/docs/usage.html

Answer 3

Mi solución:

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/
}

Answer 4

Para webpack 2 . Me las arreglo para configurar así:

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

Answer 5

Parece que la consulta es una forma alternativa de personalizar el comportamiento de un único cargador, que es más limpio que especificar esos parámetros en línea (ver a continuación). Si hay varios cargadores, Webpack no sabe a qué se aplica la configuración de la query .

Lo siguiente debería resolver su problema:

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

EDITAR: Si bien esta solución funciona para Webpack 1, consulte las otras respuestas para obtener soluciones más limpias que funcionen en versiones más recientes.