0

I am very new to Webpack so it is likely that my question is obvious and asked 100times earlier and I just cannot connect them. Perhaps.

I have small Express - Ract - Gprahql - Semantic-ui project. I need to bound it together with Webpack and I totally cannot get its logic. I need to add styling for components, I guess should use css-module for it? (Do I?) and add some magic content do module part of webpack.config. So far (working without custom css) it looks like that: 

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

I found in docs that I need css and style loader (whatever it means) so I've installed proper packages and add object to module.rules: 

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

All I get is error while compiling. 

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

I wish I could investigate it more before I ask but I dont know where to start. Here is my repo if you need: https://bitbucket.org/don_Kamillo/ranking/src

Kamil Lewandowski
  • 396
  • 1
  • 5
  • 15

1 Answers1

2

At the moment, it doesn't look like you have a loader for .js files. This is because your babel-loader is configured with .jsx$. If you want the x to be optional then use .jsx?$:

module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.jsx?$/,
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
Davin Tryon
  • 66,517
  • 15
  • 143
  • 132