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

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

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

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

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

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

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

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

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

Ответы

Ответ 1

Обновление: В устаревших версиях Webpack вы можете определить массив загрузчиков в конфигурации Webpack.

Если вам нужно использовать более старые версии Webpack или добавить встроенные параметры, оригинальный ответ приведен ниже.

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

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

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

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

Using Loaders: Query parameters

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

Ответ 2

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

С помощью 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',
      ],
    },
  },
]);

Ответ 3

В webpack 2 и 3 это можно настроить гораздо более чисто.

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

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

Для сравнения, здесь та же конфигурация в webpack 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. Его можно оставить в покое, и он все равно будет работать, но ответ будет казаться неполным без указания очевидного обновления: -)

Ответ 4

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

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