Webpack：使用 react-hot 和 babel 定义多个加载器的“查询”答案

【问题标题】：Webpack: defining 'query' with multiple loaders with react-hot and babelWebpack：使用 react-hot 和 babel 定义多个加载器的“查询”
【发布时间】：2016-07-27 01:24:44
【问题描述】：

更新：感谢@bebraw，解决方案是使用新的 babel 预设：

请注意，react-hot 已被弃用，现在有一个等效的 babel 插件。 npmjs.com/package/babel-preset-react-hmre 为您完成设置。

具体错误是：

Cannot define 'query' and multiple loaders in loaders list

This 链接是遇到相同错误但有不同解决方案的人。

理想情况下，我可以这样运行：

module: 
  {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel'],
        exclude: /node_modules/,
        include: path.join(__dirname, 'app'),
        query: {
          stage: 0,
          plugins: ['./babelRelayPlugin']
        }
      },

我希望通过 Babel 运行的东西通过 babelRelayPlugin，这是一个位于 / 的 js 文件。

我的babelRelayPlugin.js 文件如下所示：

var babelRelayPlugin   = require('babel-relay-plugin');
var introspectionQuery = require('graphql/utilities').introspectionQuery;
var request            = require('sync-request');

var graphqlHubUrl = 'http://www.GraphQLHub.com/graphql';
var response = request('GET', graphqlHubUrl, {
  qs: {
    query: introspectionQuery
  }
});

var schema = JSON.parse(response.body.toString('utf-8'));

module.exports = babelRelayPlugin(schema.data, {
  abortOnError: true,
});

问题是您不能使用多个加载器并拥有query。我认为解决方案位于使用? 内联的“查询参数”的某个地方，但我尝试了许多可能的解决方案，但无法使其正常工作。

【问题讨论】：

请注意，react-hot 已被弃用，现在有一个等效的 babel 插件。 npmjs.com/package/babel-preset-react-hmre 为您完成设置。
啊！谢谢@bebraw。我已经离开游戏太久了。
没关系。也许我们可以以某种方式结束这个问题。答案是把它分开。
我会在顶部更新并参考您的评论。
我将我的 cmets 移到了一个答案中。谢谢。 :+1:

标签： javascript webpack babeljs

【解决方案1】：

请注意，react-hot 已被弃用，现在有一个等效的 babel 插件。 npmjs.com/package/babel-preset-react-hmre 为您完成设置。

或者，您可以像这样拆分配置：

{
  test: /\.js$/,
  loaders: ['react-hot'],
  exclude: /node_modules/,
  include: path.join(__dirname, 'app')
},
{
  test: /\.js$/,
  loaders: [babel'],
  exclude: /node_modules/,
  include: path.join(__dirname, 'app'),
  query: {
    stage: 0,
    plugins: ['./babelRelayPlugin']
  }
}

请注意，加载程序的评估顺序是从右到左，从下到上。因此顺序。

【讨论】：