代码之家 › 专栏 › 技术社区 › simonzack

Web包热重新加载使用了不正确的url

hot-reload webpack reactjs django javascript

simonzack · 技术社区 · 4 年前

localhost:3000 但当我试图去 localhost:3000/foo/page

为bundle.js?

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

0 回复 | 直到 8 年前

Kocur4d 8 年前

output.publicPath: '/' 到你的网页包配置。

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

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

设置

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

从 Webpack Config 页码:23/46

publicPath指定的公共URL地址在浏览器中引用时的输出文件。对于嵌入或标记或引用资产,如图像,publicPath 磁盘上的位置(由路径指定)。当你希望在不同域或上托管某些或所有输出文件 CDN。Webpack Dev服务器还使用它从publicPath获取提示从文件中确定要服务的位置。就像你的路一样