configuration de webpack pour réagir CSS

Question

Je suis très nouveau à Webpack donc il est probable que ma question soit évidente et posée 100 fois plus tôt et je ne peux pas les connecter. Peut-être. J'ai un petit projet Express - Ract - Gprahql - Semantic - ui. Je dois le relier avec Webpack et je ne peux absolument pas comprendre sa logique. Je dois ajouter un style pour les composants, je suppose que vous devriez utiliser css-module pour cela? (Ai-je?) Et ajouter un peu de contenu magique faire partie du module de webpack.config. Jusqu'à présent (travailler sans css sur mesure), il ressemble à ça:

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' 
    }) 
    ] 
}; 

Je trouve dans docs que j'ai besoin et le style css chargeur (tout cela signifie), donc je l'ai installé les paquets appropriés et ajouter objet à module.rules :

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

Tout ce que j'obtiens est une erreur lors de la compilation. Je souhaite que je pourrais enquêter plus avant que je demande mais je ne sais pas par où commencer. Voici mon repo si vous avez besoin: https://bitbucket.org/don_Kamillo/ranking/src

Answer 1

À l'heure actuelle, il ne semble pas que vous ayez un chargeur pour les fichiers .js. C'est parce que votre babel-loader est configuré avec .jsx$. Si vous voulez que le x être en option puis utilisez .jsx?$:

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