Как добавить запрос в загрузчик веб-пакетов с несколькими загрузчиками?

Question

У меня есть этот загрузчик Babel, который работает

{ test: /\.jsx?$/, loader: 'babel', query: babelSettings, exclude: /node_modules/ },

Но теперь я хочу загрузчик CoffeeScript, но я хочу передать его через Babel, чтобы получить модные вещи HMR

{ test: /\.coffee$/, loader: 'babel!coffee', query: babelSettings, exclude: /node_modules/ },

Это не работает, хотя и приводит к следующей ошибке.

Ошибка: невозможно определить 'запрос' и несколько загрузчиков в списке загрузчиков

Есть идеи, как определить запрос только для части Babel в цепочке загрузчиков? Запрос является сложным объектом, и я не думаю, что смогу его кодировать.

var babelSettings = { stage: 0 };

if (process.env.NODE_ENV !== 'production') {
  babelSettings.plugins = ['react-transform'];
  babelSettings.extra = {
    'react-transform': {
      transforms: [{
        transform: 'react-transform-hmr',
        imports: ['react'],
        locals: ['module']
      }, {
        transform: 'react-transform-catch-errors',
        imports: ['react', 'redbox-react']
      }]
      // redbox-react is breaking the line numbers :-(
      // you might want to disable it
    }
  };
}

Answer 1

Способ сделать это - установить параметры запроса в самой строке загрузчика, как query Ключ объекта будет работать только для одного загрузчика.

Предполагая, что ваш объект настроек может быть сериализован в JSON, как показывает ваш пример, вы можете легко передать ваш объект настроек как запрос JSON. Тогда только загрузчик Babel получит настройки.

{ test: /\.coffee$/, loader: 'babel?'+JSON.stringify(babelSettings)+'!coffee', exclude: /node_modules/ }

Функция для этого несколько документирована здесь:

Использование загрузчиков: параметры запроса

Большинство загрузчиков принимают параметры в обычном формате запроса (?key=value&key2=value2) и как объект JSON (?{"key":"value","key2":"value2"}).

Answer 2

Сокра, создатель Webpack, дает свое собственное представление о том, как это сделать здесь, но вам, вероятно, будет лучше работать с помощником webpack-комбинировать-загрузчики, который по стилю больше похож на определение одного загрузчика с объектом запроса.

С webpack-combine-loadersВы можете определить несколько загрузчиков как таковые:

combineLoaders([
  {
    loader: 'css-loader',
    query: {
      modules: true,
      sourceMap: true,
      localIdentName: '[name]__[local]--[hash:base64:5]',
    },
  },
  {
    loader: 'sass-loader',
    query: {
      sourceMap: true,
      includePaths: [
        'app/assets/stylesheets',
        'app/assets/stylesheets/legacy',
      ],
    },
  },
]);

Answer 3

В веб-пакете 2 и 3 это можно настроить гораздо проще.

Загрузчики могут передаваться в массиве объектов загрузчика. Каждый объект загрузчика может указывать options объект, который действует как веб-пакет 1 query для этого конкретного погрузчика.

Например, используя оба react-hot-loader а также babel-loader, с babel-loader настроен с некоторыми опциями, в веб-пакете 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'
        ]
      }
    }]
  }] 
}

Для сравнения приведена та же конфигурация в веб-пакете 1 с использованием метода строки запроса.

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

Обратите внимание на измененные имена свойств по всей цепочке.

Также обратите внимание, что я изменил es2015 предустановка es2015-native-modules предустановка в babel-loader конфигурации. Это не имеет ничего общего со спецификацией optionsПросто включение модулей es6 позволяет использовать функцию встряхивания деревьев, появившуюся в v2. Его можно оставить в покое, и он все равно будет работать, но ответ будет неполным, если не будет указано это очевидное обновление:-)

Answer 4

test Свойство просто regex, так что вы можете запустить проверку для jsx и coffee одновременно: test: /\.(jsx|coffee)$/

Sass / SCSS немного проще: test: /\.s[ac]ss$/