Webpack 带有browsersync到代理的Web包开发中间件

我搜索了很多，但找不到问题的答案，所以我来了：

我尝试将一个吞咽工作流与webpack合并。事情是这样的： -大口观看html的变化 -网页包处理css和js部分 -所有内容均由代理“”中的浏览器同步（使用webpack开发中间件）交付

所以当browsersync创建他的服务器时，一切正常。但是，如果我尝试通过代理，WebpackDev中间件将无法服务于捆绑包

webpack.config.dev.js

module.exports = merge(webpackConfig, {

    entry: [
        path.resolve(pathsConfig.root.src, pathsConfig.js.src),
        'webpack/hot/dev-server',
        'webpack-hot-middleware/client'
    ],

    mode: 'development',

    devServer: {
        proxy: {
            '*': {
                target: 'http://192.168.1.123/private/test/dist/',
                changeOrigin: true
            }
        },
    },

    module: {
        rules: [{
            test: /\.(sa|sc|c)ss$/,
            use: [
                "style-loader",
                "css-loader",
                "sass-loader"
            ]
        }]
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
});

server.js任务

/*****************************************
 * Server Task
 ******************************************/
/* Import
 ******************************************/
import gulp from 'gulp'
import browserSync from 'browser-sync'
import webpack from 'webpack'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'
import path from 'path'

import devConfig from '../config/webpack.config.dev'

/* Settings
 ******************************************/
const browser = browserSync.create()
const bundler = webpack(devConfig)

let serverConfig = {
    // browsersync config
    // server: 'dist',
    proxy: 'http://192.168.1.123/8bitstudio/starter/dist',
    open: 'external',
    files: "dist/**/*",

    // webpack config
    middleware: [
        webpackDevMiddleware(bundler, {
            publicPath: '/',
        }),

        webpackHotMiddleware(bundler)
    ],
}


/* Task
 ******************************************/
const serverTask = function() {
    browser.init(serverConfig)
}


/* Export
 ******************************************/
gulp.task('server', serverTask)
module.exports = serverTask

---

如果您还需要什么或者我不清楚，请告诉我。

好的，我找到了我想要的。我只需要在publicPath中写入代理地址

我从未一起使用过Gulp+Webpack，但这里有一些值得尝试的技巧：Webpack的devServer默认在localhost:8080上运行，并显示您在其代理选项中设置的站点。首先，您必须使其工作，以查看您的站点由devServer运行。当一切正常时，您必须将Browsersync的代理设置为端口8080上的代理。另一个技巧是在devServer/proxy/target上使用对象键。但如果我是你，我会一饮而尽。带有

browser sync Webpack plugin

的Webpack 4可以自己轻松地完成所有这些工作。我可以让Webpack在localhost:8080中显示站点，与192.168.1.123/path/to/project上的显示相同。但我试图让webpack在192.168.1.123上工作，而不仅仅是在localhost:8080上“观看并复制”。我使用gulp在html/php文件、图像、SVG等方面执行一些任务。我试图构建一个没有吞咽的工作流程，但这些功能有点缺失。