web-dev-qa-db-ja.com

複数のローダーがあるwebpackローダーにクエリを追加する方法は？

私は働いているこのバベルローダーを持っています

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

しかし今、CoffeeScriptローダーが欲しいのですが、それをBabelにパイプして、派手なHMRのものを取得したいです

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

ただし、これは機能せず、次のエラーが発生します。

エラー：ローダーリストに「クエリ」と複数のローダーを定義できません

ローダーチェーンのバベル部分だけにクエリを定義する方法はありますか？クエリは複雑なオブジェクトであり、エンコードできるとは思いません。

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
    }
  };
}
javascriptcoffeescriptwebpackbabeljs
54
Chet

更新：非旧バージョンのWebpackで Webpack構成でローダーの配列を定義できます 。

古いバージョンのWebpackを使用するか、オプションをインラインで追加する必要がある場合、元の答えは以下のとおりです。

queryオブジェクトキーは1つのローダーに対してのみ機能するため、これを行う方法は、ローダー文字列自体にクエリパラメーターを設定することです。

設定オブジェクトをJSONにシリアル化できると仮定すると、例が示すように、設定オブジェクトをJSONクエリとして簡単に渡すことができます。その後、Babelローダーのみが設定を取得します。

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

これを行うための機能は、ここでいくらか文書化されています：

ローダーの使用：クエリパラメーター

ほとんどのローダーは、通常のクエリ形式（?key=value&key2=value2）およびJSONオブジェクトとして（?{"key":"value","key2":"value2"}）。

31
Alexander O'Mara

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

webpack 2＆では、これをよりきれいに設定できます。

ローダーは、ローダーオブジェクトの配列で渡すことができます。各ローダーオブジェクトは、特定のローダーのwebpack 1 optionsのように動作するqueryオブジェクトを指定できます。

たとえば、react-hot-loaderおよびbabel-loader、babel-loaderwebpack 2＆でいくつかのオプションを設定

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で導入されたツリーシェーキング機能を使用できるようになるだけです。そのままにしておくこともできますが、その明らかなアップグレードが指摘されない限り、答えは不完全に感じられます：-）

13
davnicwil

testプロパティは単なる正規表現なので、jsxとcoffeeの両方のチェックを同時に実行できます：test: /\.(jsx|coffee)$/

Sass/SCSSは少し簡単です：test: /\.s[ac]ss$/

2
Brandon Aaskov