Question

I'm using react with webpack. My app worked well before using webpack-dev-server. Only the home page works now, the others return "404 not found". Maybe there's a problem in webpack.config.js ?

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

var BUILD_DIR = path.resolve(__dirname, "public");
var APP_DIR = path.resolve(__dirname, "app");

var config = {
    entry: [
        "webpack/hot/only-dev-server",
        APP_DIR + "/main.js",
        "webpack-dev-server/client?localhost:8080"
    ],

    output: {
        path: BUILD_DIR + "/dist",
        filename: "bundle.js",
    },

    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.HotModuleReplacementPlugin()
    ],

    module: {
        loaders: [...],
    },

    devServer: {
        noInfo: true,
        hot: true,
        inline: true
    },
}

module.exports = config;

And my script in package.json:

"start": "webpack --watch & webpack-dev-server --content-base public"

Webpack generates well bundle file. So i think the webpack-dev-server is the one who causes this problem.

Thank you !

Answer 1

I've found the answer. For someone who has the same problem, we need to add "historyApiFallback: true" to devServerConfig:

devServer: {
    noInfo: true,
    hot: true,
    inline: true,
    historyApiFallback: true
},

Answer 2

can you change your npm script

"start": "webpack --watch & webpack-dev-server --content-base public"

to

"start": "webpack --watch & webpack-dev-server --content-base public/"

and see what happens? Otherwise I will comeback and assist you.