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

У меня есть этот загрузчик 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
    }
  };
}

webpack javascript babeljs coffeescript
person Chet    schedule 14.10.2015    source источник

Ответы (4)


arrow_upward
31
arrow_downward

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

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

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

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

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

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

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

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

person Alexander O'Mara    schedule 14.10.2015

arrow_upward
14
arrow_downward

Сокра, создатель 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',
      ],
    },
  },
]);
person Brett Sun    schedule 17.02.2016

arrow_upward
13
arrow_downward

В webpack 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'
        ]
      }
    }]
  }] 
}

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

person davnicwil    schedule 21.01.2017

arrow_upward
3
arrow_downward

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

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

person Brandon Aaskov    schedule 22.11.2016