反応パッケージのwebpack設定のプリセットとローダーの照会

Question

a libraryをwebpackと反応させてアプリケーションに組み込もうとしました。ここで が私のWebPACKの設定の一部です：

module: { 
    loaders: [{ 
    test: [/\.jsx$/, /\.js$/], 
    exclude: /(node_modules|bower_components)/, 
    loader: 'babel', 
    query: {presets: ['react', 'es2015']} 
    }, 
    { 
    test: /(\.scss|\.css)$/, 
    loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[local]_[hash:base64:5]!postcss?sourceMap!sass!toolbox') 
    }, 
    { 
    test: /\.(png|jpg)$/, 
    loader: 'url-loader?limit=8192' 
    }]} 

しかし、ライブラリの説明にモジュールを含めるための別の方法があります：

module: { 
loaders: [{ 
    test:[/\.jsx$/, /\.js$/], 
    loaders: ['react-hot', 'babel?stage=0&loose[]=es6.modules'], 
    include: [ 
    path.resolve(__dirname, "src"), 
    path.resolve(__dirname, "node_modules/flash-notification-react-redux") 
    ], 
}, { 
    test: [/\.scss$/, /\.css$/], 
    loader: 'css?localIdentName=[path]!postcss-loader!sass', 
}],},}; 

私たちは、「クエリ」を参照していないが、我々は「ローダー」を参照してください。代わりに "ローダー"。ライブラリにどのように設定する必要がありますか？

ありがとうございました。

Answer 1

ライブラリをアプリケーションに組み込む最も簡単な方法は、ライブラリを必要とするか、それをインポートすることです。

あなたはこれを行うだろうcommonjs構文を使用している場合：あなたはES6の構文を使用している場合

var React = require('react'); 

を：

import React from 'react'; 

をWebPACKのは、あなたのファイルをバンドルしたときに、これを行うことにより、依存関係は一緒にバンドルされます。

ローダーとローダーの違いは、ローダーではファイルを処理するローダーが1つだけであり、ローダーを使用する場合はパイプのような異なるローダーで処理することができます。ローダーは右から左に実行されることに注意してください。

クエリは、パラメータをローダに渡す方法です。クエリパラメータと複数のローダを定義することはできません。

あなたがローダにパラメータを渡す必要があるとあなたは同じファイルタイプに対して複数のローダーを使用する必要がある場合、あなたはそのようにオブジェクトごとに1つのローダーを使用して行うことができます。

module: { 
    loaders: [ 
     { 
     test: /\.css$/, 
     loader: 'style', 
     query: {} 
     }, 
     { 
     test: /\.css$/, 
     loader: 'css', 
     query: {} 
     } 
    ] 
    } 

ローダー同じのためにファイルタイプは下から上に実行されるので、上の例はこれと同じです：

module: { 
    loaders: [ 
     { 
     test: /\.css$/, 
     loaders: ['style', 'css'] 
     } 
    ] 
    }