【问题标题】：Webpack dev server run on different portWebpack 开发服务器在不同的端口上运行
【发布时间】：2015-08-08 22:31:56
【问题描述】：

所以我让 IIS 在端口 80 上为我的 WebApi 和 AngularJS 项目提供服务，在 hosts 文件中使用别名 mywebsite.local-dev.com。

我有用于捆绑的 webpack 配置设置，我现在要做的就是将 webpack 开发服务器放在顶部，这样当我修改文件时，它会重新捆绑所有内容并更新浏览器。

我的browser-sync 几乎可以工作，但require('./somehtmltemplate.html') 似乎正在引起问题。这是一个 Angular 应用程序，所以我在 ui-router 模板属性中使用了 require。这是我的 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);
});

我的问题是，我如何让其中一个工作。

编辑

因为我使用的是.cshtml，所以我不能使用webpack-dev-server。所以问题是，我怎样才能让 gulp 工作？

【问题讨论】：

标签： angularjs gulp webpack gulp-watch webpack-dev-server

【解决方案1】：

我通过在代理上使用 webpack-dev-middleware 和 webpack-hot-middleware 作为中间件时让 Browsersync 代理我的外部服务器（在我的情况下为 MAMP，但这不重要）解决了类似的问题。通过该设置，您可以让您的普通服务器负责为您的应用程序提供服务，而 Browsersync+Webpack 将只处理资产捆绑和服务，以及浏览器注入和重新加载。

如果您有兴趣，这里有一个工作示例：github.com/shanecav/webpack-browsersync-proxy

【讨论】：

非常感谢，今晚会更深入地研究它！