路径更改时，Webpack 从错误的 URL 加载

Question

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

对我来说，这看起来像是 Webpack 在错误的地方寻找 bundle.js 的问题，但我不确定。如何让应用程序始终查看 localhost:3000 的 bundle.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 Config页面：

输出.publicPath

publicPath 指定公共 URL 地址 在浏览器中引用时的输出文件。对于嵌入的装载机 或标签或参考资产，如图像，publicPath 是 当文件不同时用作文件的 href 或 url() 磁盘上的位置（由路径指定）。当您 想要将部分或全部输出文件托管在不同的域或 CDN。 Webpack 开发服务器也使用它从 publicPath 中获取提示 确定从哪里提供输出文件。和你的路径一样 可以使用 [hash] 替换来获得更好的缓存配置文件。