Webpack：使用react-hot和babel使用多個加載程序定義'查詢'

Question

更新：由於@bebraw，解決方案是使用新的babel預設：

請注意，react-hot已被棄用，現在有一個等效的babel插件。 npmjs.com/package/babel-preset-react-hmre為您完成設置。

具體錯誤是：

Cannot define 'query' and multiple loaders in loaders list

該鏈接遇到了相同的錯誤，但是具有不同的解決方案。

理想情況下，我可以運行以下命令：

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

我希望通過Babel運行的內容通過babelRelayPlugin進行訪問， 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 。 我認為解決方案位於使用“ ? ”內聯的“查詢參數”中? ，但我嘗試了許多可能的解決方案，但無法使其正常工作。

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

請注意，加載程序是從右到左以及從下到上評估的。 因此，順序。