（React Webpack）在开发模式下运行项目时，不会加载src文件夹下的文件

Question

I'm new in React.js. I created project with 'create-react-app' command. I wanted to add server, so eject project. But files that located under the src folder don't appear on localhost:4000. I can see contents in index.html. What is my problem?

Here is my package.json scripts

"scripts": {
    "development": "cross-env NODE_ENV=development nodemon --exec babel-node --presets=es2015 ./server/main.js --watch server"
}

And this is webpack.dev.config.js

  var webpack = require('webpack');
    var path = require('path');

    module.exports = {

    entry: [
        'babel-polyfill',
        './src/index.js',
        'webpack-dev-server/client?http://0.0.0.0:4000',
        'webpack/hot/only-dev-server',
        './src/style.css'
    ],

    output: {
        path: '/',
        filename: 'bundle.js'
    },

    devServer: {
        hot: true,
        filename: 'bundle.js',
        publicPath: '/',
        historyApiFallback: true,
        contentBase: './public',
        proxy: {
            "*": "http://localhost:3000"
        }
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],

    resolve: {
      modules: [path.resolve("./src"), 'node_modules']
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel-loader?' + JSON.stringify({
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                })],
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
};

Answer 1

webpack-dev-server loads only the content of index.html because it doesn't see the bundle file bundle.js . In your configuration, the destination of the bundle file is the directory '/' .

 output: {
        path: '/',
        filename: 'bundle.js'
    }

But webpack-dev-server serve contents from './public' directory ( contentBase: './public' ). You should tell webpack to look at public directory and root directory like this

devServer: {
        hot: true,
        filename: 'bundle.js',
        publicPath: '/',
        historyApiFallback: true,
        contentBase: ['/', '/public'],
        proxy: {
            "*": "http://localhost:3000"
        }
    }

Don't forget to reference the bundle file in index.html.