私は働いているこのバベルローダーを持っています
{ 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
}
};
}
更新:非旧バージョンの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"}
)。
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',
],
},
},
]);
webpack 2&では、これをよりきれいに設定できます。
ローダーは、ローダーオブジェクトの配列で渡すことができます。各ローダーオブジェクトは、特定のローダーのwebpack 1 options
のように動作するquery
オブジェクトを指定できます。
たとえば、react-hot-loader
およびbabel-loader
、babel-loader
webpack 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で導入されたツリーシェーキング機能を使用できるようになるだけです。そのままにしておくこともできますが、その明らかなアップグレードが指摘されない限り、答えは不完全に感じられます:-)
test
プロパティは単なる正規表現なので、jsxとcoffeeの両方のチェックを同時に実行できます:test: /\.(jsx|coffee)$/
Sass/SCSSは少し簡単です:test: /\.s[ac]ss$/