1

I have React app with structure like this:

├── components
│   ├── app
│   │   └── App.js
│   ├── grid
│   │   ├── Cell.js
│   │   ├── Grid.js
│   │   └── Row.js
│   └── navbar
│       └── Navbar.js
├── store
│   ├── apartments.js
│   ├── api.js 
│   ├── index.js
│   └── orders.js
├── index.js
├── routes.js

when I change something in one of my components files webpack won't compile. But when I change files in "store" folder or index.js it'll compile successfully
Here the my config file:

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        bundle: './src/index.js'
    },
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                use: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                use: ['style-loader', 'css-loader'],
                test: /\.css$/
            }
        ]
    }
};

I tried run webpack-dev-server with --hot flag.
Also installed case-sensitive-paths-webpack-plugin
Specified contentBase : __dirname in dev-server config
it is all didn't help me
My webpack version: 2.6.1, webpack-dev-server: 2.4.5
But sometimes it is just work and I can't understand why, it is some sort of magic for me. It can work after renaming files and folders or it worked after case-sensitive-paths-webpack-plugin instalation but then stop again.
Please can someone at least explain how I can debug this. I googled problem for two days and didn't find any solution.

Ivan Semochkin
  • 8,649
  • 3
  • 43
  • 75

0 Answers0