Webpack dev server run on different port

Question

So I have IIS serving up my WebApi and AngularJS project on port 80, using a the alias mywebsite.local-dev.com in the hosts file.

I have webpack config setup for bundling, all I want to do now is stick webpack dev server over the top so that when I modify a file it re bundles everything and updates the browser.

I have browser-sync nearly working but require('./somehtmltemplate.html') seems to be causing issues. It's an Angular app so I use require in the ui-router template property. Here is my gulpfile:

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    watch = require('gulp-watch'),
    webpack = require('webpack'),
    webpackconfig = require('./webpack.config');

gulp.task("webpack", function(callback) {
    // run webpack
    webpack(
      webpackconfig,
      function(err, stats) {
        if(err) throw new gutil.PluginError("webpack", err);

        callback();
      }
    );
});

gulp.task('watch', function() {
    browserSync.init({
        proxy: "mywebsite.local-dev.com"
    });

    gulp.watch("App/**/*.js", ['webpack']).on('change', browserSync.reload);
    gulp.watch("App/**/*.html", ['webpack']).on('change', browserSync.reload);
});

My question is, how do I get either one working.

edit

Because I am using .cshtml I can't use webpack-dev-server. So the question is, how can I get gulp working?

Answer 1

I solved a similar problem by having Browsersync proxy my external server (MAMP in my case, but it shouldn't matter) while using webpack-dev-middleware and webpack-hot-middleware as middleware on the proxy. With that setup, you can have your normal server take care of serving your app, and Browsersync+Webpack will just handle asset bundling & serving, and browser injections & reloads.

Here's a working example if you're interested: github.com/shanecav/webpack-browsersync-proxy