如何向具有多个加载器的webpack加载器添加查询？ [英] How to add a query to a webpack loader with multiple loaders?

问题描述

我有这个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： 
 import：['react']，
 import：['react'，
， redbox-react'] 
}] 
 // redbox-react打破行号:-( 
 //你可能想禁用它
} 
} ; 
} 
  

解决方案

是在加载器字符串本身中设置查询参数，因为查询对象键将只适用于一个加载器。

假设你的设置对象可以序列化为JSON，如你的例子所示，你可以很容易地作为JSON查询传递你的设置对象，然后只有Babel加载器将获得设置。

  {test：/\.coffee$/，loader：'babel？'+ JSON.stringify（babelSettings）+'！coffee'，exclude：/ node_modules /} 
  

这样做的功能在这里有些记录：

使用加载器：查询参数

大多数加载程序接受正常查询格式的参数（？key = value& key2 = value2 ）和JSON对象（？{key：value，key2：value2} ）。

I have this Babel loader that's working

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

But now I want a CoffeeScript loader but I want to pipe it through Babel to get the the fancy HMR stuff

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

This doesn't work though, and results in the following error.

Error: Cannot define 'query' and multiple loaders in loaders list

Any idea how to define the query just for the Babel part of the loader chain? The query is a complicated object and I don't think I can encode it.

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

解决方案

The way to do this is to set the query parameters in the loader string itself, as the query object key will only work for one loader.

Assuming your settings object can be serialized to JSON, as your example indicates, you could easily pass your settings object as a JSON query. Then only the Babel loader will get the settings.

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

The feature for doing this is somewhat documented here:

Using Loaders: Query parameters

Most loaders accept parameters in the normal query format (?key=value&key2=value2) and as JSON object (?{"key":"value","key2":"value2"}).

这篇关于如何向具有多个加载器的webpack加载器添加查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！