如何向具有多個加載器的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$/