当路径改变时,Webpack从错误的URL加载

Question

我正在写一个反应应用程序,当我导航到一切正常时localhost:3000,但是当我尝试去时localhost:3000/foo/page,我收到一条错误消息,告诉我localhost:3000/foo/bundle.js无法加载.

对我来说,这似乎是Webpack在bundle.js的错误位置查找的问题,但我不确定.如何让应用程序始终查看localhost:3000bundle.js？

这是我的一些webpack配置.

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

添加output.publicPath: '/'到您的webpack配置.

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

HtmlWebpackPlugin最有可能生成具有以下内容的文件:

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

设置output.publicPath: '/'将使它:

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

从Webpack配置页面:

output.publicPath

publicPath在浏览器中引用时指定输出文件的公共URL地址.对于嵌入或标记或引用像图像这样的资源的加载器,当publicPath与磁盘上的位置(由path指定)不同时,将使用publicPath作为文件的href或url().当您想要在不同的域或CDN上托管部分或全部输出文件时,这会很有用.Webpack Dev Server还从publicPath中获取提示,使用它来确定从哪里提供输出文件.与路径一样,您可以使用[hash]替换来获得更好的缓存配置文件.