webpack-dev-middleware with browsersync into proxy

Question

I searched a lot but couldn't find any answer to my problem, so here I am:

I try to merge a gulp workflow with webpack. Here how it goes: - gulp watch html changes - webpack handle css and js part - all is delivered by browser-sync (who use webpack-dev-middleware) in proxy 'http://192.168.1.123:3000/path/to/project/dist'

So when browsersync create his server, everything is working fine. But if I try through the proxy, webpack-dev-middleware can't serve bundle.

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 task

/*****************************************
 * 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

Please let me know if you need anything else or if I'm not clear.

I've never used Gulp + Webpack together but here's some tips that worth to try: Webpack's devServer runs by default on localhost:8080 and shows the site what you have set in its proxy option. First of all you have to make it work to see your site running by devServer. When it's ok than you have to set Browsersync's proxy to that on port 8080. Another tip is to use ** object key instead * at devServer/proxy/target. But if I were you I would drop Gulp totally. Webpack 4 with browser-sync-webpack-plugin can do all of these on its own much easier. — ARS81
I could make webpack works to display the site in localhost:8080 the same it should be on 192.168.1.123/path/to/project. But I try to make webpack works on 192.168.1.123, not just "watch and copy" on localhost:8080. I use gulp to do some tasks on html/php files, images, svgs, ...etc. I tried to build a workflow without gulp but these features was kind of missing. — Thomas

Thomas Thomas · Accepted Answer · 2018-09-27T13:05:00

1

votes

Ok, I found what I wanted. I just needed to write the proxy address in the publicPath !

webpack-dev-middleware with browsersync into proxy

1 Answers