当路径更改时，Webpack从错误的URL加载 [英] Webpack loads from the wrong URL when the path changes

问题描述

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

I'm writing a react app and everything works fine when I navigate 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.

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

To me, this looks like a problem with Webpack looking in the wrong place for bundle.js, but I'm not sure. How do I get the app to always look at localhost:3000 for bundle.js?

这是我的一些webpack配置.

This is some of my webpack config.

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()
        ]
    });
}

推荐答案

在Webpack配置中添加 output.publicPath:'/'.

Add output.publicPath: '/' to your webpack config.

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

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

HtmlWebpackPlugin most probably generates the file which have:

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

设置 output.publicPath:'/'即可:

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

在 Webpack配置页面中:

output.publicPath

output.publicPath

publicPath指定以下地址的公共URL地址:在浏览器中引用时的输出文件.对于嵌入的装载机或标签或参考资产(例如图片)，publicPath是与其不同时用作文件的href或url()磁盘上的位置(由路径指定).当您想要将部分或全部输出文件托管在不同的域或某个主机上CDN.Webpack Dev Server也从使用它的publicPath中获取提示确定从何处提供输出文件.和路径一样可以使用[hash]替换来获得更好的缓存配置文件.

The publicPath specifies the public URL address of the output files when referenced in a browser. For loaders that embed or tags or reference assets like images, publicPath is used as the href or url() to the file when it’s different then their location on disk (as specified by path). This can be helpful when you want to host some or all output files on a different domain or on a CDN. The Webpack Dev Server also takes a hint from publicPath using it to determine where to serve the output files from. As with path you can use the [hash] substitution for a better caching profile.

这篇关于当路径更改时，Webpack从错误的URL加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！