Webpack loading from wrong url when changing path

Question

I am writing a responsive application and everything works fine when I go to localhost:3000, but when I try to go to localhost:3000/foo/page, I get an error message that tells me localhost: 3000 / foo / bundle.js cannot be loaded.

For me, this seems like a problem with Webpack looking for no place for bundle.js, but I'm not sure. How to make the application always look at localhost:3000for bundle.js?

This is part of my webpack configuration.

var TARGET = process.env.npm_lifecycle_event;
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');

process.env.BABEL_ENV = TARGET;
var common = {
    entry: APP_PATH,

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

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loaders: ['babel'],
                include: APP_PATH
            },
            {
                test: /\.svg$/,
                loader: 'url-loader?limit=8192',
                include: APP_PATH
            },
            {
                test: /\.png$/,
                loader: 'url-loader?limit=8192',
                include: APP_PATH
            },
            {
                test: /\.ico$/,
                loader: 'url-loader?limit=8192',
                include: APP_PATH
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: 'foobar',
            template: path.resolve(APP_PATH, 'index.html'),
            favicon: path.resolve(APP_PATH, 'images', 'favicon.ico')
        })
    ]
};

if (TARGET === 'start' || !TARGET) {
    module.exports = merge(common, {
        devtool: 'eval-source-map',
        module: {
            loaders: [
                {
                    test: /\.scss$/,
                    loaders: ['style', 'css', 'sass'],
                    include: APP_PATH
                }
            ]
        },
        devServer: {
            historyApiFallback: true,
            hot: true,
            inline: true,
            port: 3000,
            progress: true
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin()
        ]
    });
}

Answer 1

Add output.publicPath: '/'to the configuration of your web package.

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

HtmlWebpackPlugin, , , :

<script src="bundle.js"></script>

output.publicPath: '/' :

<script src="/bundle.js"></script>

Webpack Config :

output.publicPath

PublicPath URL- , . ,   , , publicPath href url() , ( ). , CDN. Webpack Dev Server publicPath, , . [hash] .