如何向具有多个加载器的webpack加载器添加查询？

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

更新：使用非传统版本的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"} ）。

Answer 2

Webpack的创建者Sokra在这里给出了如何做到这一点的自己的看法，但是你可能会更好地使用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',
      ],
    },
  },
]);

Answer 3

在webpack 2和3中，这可以更加干净地配置。

加载器可以在一组加载器对象中传递。 每个加载器对象都可以指定一个options对象，其作用类似于该特定加载器的webpack 1 query 。

例如，在webpack 2和3中使用react-hot-loader和babel-loader ，以及配置了一些选项的babel-loader

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预设更改为babel-loader配置中预设的es2015-native-modules 。 这与options的规范无关，只是包括es6模块允许您使用v2中引入的树抖动功能。 它可以保持独立，它仍然可以工作，但如果没有指出明显的升级，答案会感觉不完整:-)

Answer 4

test属性只是正则表达式，所以你可以同时检查jsx和coffee： test: /\\.(jsx|coffee)$/

Sass / SCSS更容易一些： test: /\\.s[ac]ss$/