CODEWITHSUNDEEP
webpackgulpmiddlewarebrowser-sync
Thomas
Thomas

Reputation: 21

webpack-dev-middleware with browsersync into proxy

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.

Upvotes: 1

Views: 1550

Answers (1)

Thomas
Thomas

Reputation: 21

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

Upvotes: 1

Related Questions