Webpack 开发服务器使用代理实时重新加载 [英] Webpack dev server live reload with proxy

问题描述

我正在 localhost:8000 上运行 PHP 应用.
我想使用 webpack-dev-server 来热加载 css、react 和 js 组件.
已将代理设置为 http://localhost:8000 但 webpack-dev-server 未重新加载浏览器.

I'm running a PHP app at localhost:8000.
I want to use webpack-dev-server to hot reload css, react and js components.
Had set a proxy to http://localhost:8000 but webpack-dev-server isn't reloading the browser.

这是webpack.config.js:

var path = require( 'path' );
var autoprefixer = require( 'autoprefixer' );

module.exports = {
    entry: [
        './src/app.js'
    ],
    output: {
        path: path.join( __dirname, 'dist' ),
        publicPath: 'http://localhost:8000',
        filename: 'app.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loaders: [ 'react-hot', 'babel-loader' ]
            },
            {
                test: /\.scss$/,
                loaders: [ 'style-loader', 'css-loader', 'sass-loader' ]
            }
        ]
    },
    postcss: [
        autoprefixer(
            {
                browsers: [
                    'last 2 versions'
                ]
            }
        )
    ],
    devServer: {
        port: 3000,
        proxy: {
            '**': {
                target: 'http://localhost:8000',
                secure: false,
                changeOrigin: true
            }
        }
    }
}

我正在通过 http://localhost:3000/webpack-dev-server/ 访问 webpack-dev-server.

I'm accessing the webpack-dev-server at http://localhost:3000/webpack-dev-server/.

更改我的 react 组件确实会导致 webpack-dev-server 重新编译，但浏览器不会更新.

Changing my react component does cause webpack-dev-server to recompile, but the browser doesn't update.

运行 webpack 会编译 dist/app.js 文件，因为手动调用它并重新加载浏览器.

Running webpack does compile the dist/app.js file, as calling it manually and reloading the browser works.

推荐答案

所以我的 publicPath 是错误的.
修复方法如下:

So my publicPath was wrong.
Here's the fix:

output: {
    path: path.join( __dirname, 'dist' ),
    publicPath: 'http://localhost:3000/dist/',
    filename: 'app.js'
},

更新:但是好像是在重新加载浏览器¯_(ツ)_/¯

update: But it seems to be reloading the browser ¯_(ツ)_/¯

这篇关于Webpack 开发服务器使用代理实时重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！