反応のためのウェブパック構成

Question

私はWebpackにはとても新しいので、私の質問は明白であり、100倍早く尋ねられ、私はそれらを接続することはできません。おそらく。 RACT - - Gprahql - セマンティック-UIプロジェクト

は、私は小さなExpressを持っています。 私はWebpackと一緒にそれをバインドする必要があり、私は完全にそのロジックを得ることができません。 私はコンポーネントのためのスタイリングを追加する必要があります、私はそれのためのCSSモジュールを使用する必要がありますか？ （Do I？）とwebpack.configの一部のマジックコンテンツdoモジュール部分を追加します。

const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './client/index.js', 
    output: { 
    path: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     use: 'babel-loader', 
     test: /\.jsx$/, 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.css$/, 
     use: [ 'style-loader', 'css-loader' ] 
     } 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'client/index.html' 
    }) 
    ] 
}; 

は私がCSSと（それがあらゆる手段）スタイルローダーを必要とするドキュメントで見つかったので、私は、適切なパッケージをインストールしてmodule.rulesにオブジェクトを追加しました：これまでのところ（カスタムCSSなしで働いて）それはそのように見えます：

{ 
    test: /\.css$/, 
    use: [ 'style-loader', 'css-loader' ] 
    } 

コンパイル中にエラーが発生します。

You may need an appropriate loader to handle this file type. 
| const Root =() => { 
|  return (
|   <ApolloProvider client={client}> 
|    <Router history={hashHistory}> 
|    <Route path="/" component={App}> 

私は尋ねる前にもっと調べることができますが、どこから始めたらよいかわかりません。 ここに私のレポが必要です：https://bitbucket.org/don_Kamillo/ranking/src

Answer 1

現時点では、.jsファイルのローダーがあるようには見えません。これは、babel-loaderが.jsx$で構成されているためです。あなたはxはオプションになりたい場合は、.jsx?$を使用します。

module: { 
    rules: [ 
     { 
     use: 'babel-loader', 
     test: /\.jsx?$/, 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.css$/, 
     use: [ 'style-loader', 'css-loader' ] 
     } 
    ] 
    },