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

【问题标题】：How to add a query to a webpack loader with multiple loaders?如何向具有多个加载器的 webpack 加载器添加查询？
【发布时间】：2016-01-12 01:23:21
【问题描述】：

我有这个正在工作的 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
    }
  };
}

【问题讨论】：

标签： javascript coffeescript webpack babeljs

【解决方案1】：

更新：使用非旧版 Webpack you can define an array of loaders in the Webpack configuration。

如果你需要使用旧版本的 Webpack 或者内联添加选项，原答案如下。

这样做的方法是在加载器字符串本身中设置查询参数，因为query 对象键仅适用于一个加载器。

假设您的设置对象可以序列化为 JSON，如您的示例所示，您可以轻松地将设置对象作为 JSON 查询传递。然后只有 Babel loader 会获取设置。

{ 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】：

在 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'
      ]
  }] 
}

请注意整个链条中更改的属性名称。

另外，请注意我在babel-loader 配置中将es2015 预设更改为es2015-native-modules 预设。这与options的规范无关，只是包含es6模块允许您使用v2中引入的tree-shaking功能。它可以单独放置，它仍然可以工作，但是如果没有指出明显的升级，答案会感觉不完整:-)

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

Webpack 的创建者 Sokra 给出了他自己的看法 here，但您可能会更好地使用 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',
      ],
    },
  },
]);

【讨论】：