Javascript 当路径更改时，从错误的URL加载网页包

我正在编写一个react应用程序，当我导航到

localhost:3000

时一切正常，但当我尝试转到

localhost:3000/foo/page

时，我收到一条错误消息，告诉我localhost:3000/foo/bundle.js无法加载

对我来说，这看起来像是Web包在bundle.js的错误位置查找的问题，但我不确定。如何让应用程序始终查看bundle.js的

localhost:3000

这是我的一些网页配置

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

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

---

将

output.publicPath:'/'

添加到您的网页配置中

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

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

HtmlWebpackPlugin最有可能生成以下文件：

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

从第页开始：

output.publicPath

publicPath指定的公共URL地址 在浏览器中引用时的输出文件。对于嵌入 或标记或引用资源（如图像），publicPath是 当文件与他们的文件不同时，用作文件的href或url（） 磁盘上的位置（由路径指定）。当您 要将部分或所有输出文件托管在其他域或服务器上吗 CDN。Webpack Dev服务器还从使用它的publicPath获取提示 确定从何处提供输出文件。和你一样 可以使用[hash]替换来获得更好的缓存配置文件

---

将

output.publicPath:'/'

添加到您的网页配置中

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

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

HtmlWebpackPlugin最有可能生成以下文件：

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

从第页开始：

output.publicPath

publicPath指定的公共URL地址 在浏览器中引用时的输出文件。对于嵌入 或标记或引用资源（如图像），publicPath是 当文件与他们的文件不同时，用作文件的href或url（） 磁盘上的位置（由路径指定）。当您 要将部分或所有输出文件托管在其他域或服务器上吗 CDN。Webpack Dev服务器还从使用它的publicPath获取提示 确定从何处提供输出文件。和你一样 可以使用[hash]替换来获得更好的缓存配置文件

---

我想publicPath='/'应该是publicPath:'/'顺便说一句，非常感谢。这就是我遇到的问题。需要为require设置publicPath。请确保正常工作。@JoseA yep已更新。谢谢你发现它！别担心，伙计！在LaravelMix中，只需添加

mix.webpackConfig（{output:{publicPath:'/'}}）谢谢你！在
url loader
文档中没有一个提到
publicPath
可以让我的资产url正常工作。我想publicPath='/'应该是publicPath:'/'顺便说一句，谢谢。这就是我遇到的问题。需要为require设置publicPath。请确保正常工作。@JoseA yep已更新。谢谢你发现它！别担心，伙计！在LaravelMix中，只需添加
mix.webpackConfig（{output:{publicPath:'/'}}）谢谢你！在
url加载器
文档中没有一个提到
publicPath
可以让我的资产url正常工作。