webpack-dev-middleware 与 browsersync 到代理答案

【问题标题】：webpack-dev-middleware with browsersync into proxywebpack-dev-middleware 与 browsersync 到代理
【发布时间】：2019-03-02 10:56:46
【问题描述】：

我搜索了很多，但找不到任何问题的答案，所以我在这里：

我尝试将 gulp 工作流程与 webpack 合并。这是怎么回事： - gulp 观看 html 更改 - webpack 处理 css 和 js 部分 - 全部由代理'http://192.168.1.123:3000/path/to/project/dist'中的浏览器同步（使用webpack-dev-middleware）提供

所以当 browsersync 创建他的服务器时，一切正常。但是如果我通过代理尝试，webpack-dev-middleware 不能提供捆绑服务。

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

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

【问题讨论】：

我从未同时使用过 Gulp + Webpack，但这里有一些值得尝试的技巧：Webpack 的 devServer 默认在 localhost:8080 上运行，并显示您在其代理选项中设置的站点。首先，您必须让它工作才能看到您的站点由 devServer 运行。当一切正常时，您必须将 Browsersync 的代理设置为端口 8080 上的代理。另一个技巧是在 devServer/proxy/target 上使用 ** 对象键而不是 *。但如果我是你，我会完全放弃 Gulp。带有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 文件、图像、svgs 等执行一些任务。我尝试在没有 gulp 的情况下构建工作流程，但这些功能有点缺失。

标签： webpack gulp middleware browser-sync

【解决方案1】：

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

【讨论】：