Как да добавите заявка към зареждащ модул на 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 loader ще получи настройките.

{ 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

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',
      ],
    },
  },
]);
person Brett Sun    schedule 17.02.2016

arrow_upward
13
arrow_downward

В 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. Може да бъде оставен сам и пак ще работи, но отговорът ще изглежда непълен, без това очевидно надграждане да бъде посочено :-)

person davnicwil    schedule 21.01.2017

arrow_upward
3
arrow_downward

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

Sass/SCSS е малко по-лесно: test: /\.s[ac]ss$/

person Brandon Aaskov    schedule 22.11.2016