Webpack-dev-server: bundled js cannot be found from webpack-dev-server invoked from gulp.

[t246246]

Source is copied from https://github.com/joe380/primeng-quickstart-webpack and update some packages. I just modified output entries in config file, other config did not differ so much. Folder structure is as it was.

My webpack.config.js

var path = require('path');

function root(p) {
  return path.resolve(__dirname, p);
}

module.exports = {
  entry: [
      './app/boot.ts',
        // "webpack-dev-server/client?http://localhost:8080",
        // "webpack/hot/dev-server"
  ],
  output: {
      path: root('dist'),
      publicPath: '/dist/',
      filename: 'bundle.js'
  },
  resolve: {
      modulesDirectories: ['node_modules'],
      root: path.resolve('./app'),
      extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
  },
  module: {
    loaders: [
          { test: /\.tsx?$/, loader: 'ts-loader' },
        // note that babel-loader is configured to run after ts-loader
        // { test: /\.tsx?$/,
        //   loader: 'babel-loader?presets[]=es2015,presets[]=stage-0!ts-loader'},
          { test: /\.json$/, loader: 'json-loader' },
          { test: /\.html$/, loader: "raw-loader" }
    ],
    preLoaders: [
         { test: /\.js$/, loader: "source-map-loader",
         exclude: [root('node_modules/rxjs'), root('node_modules/primeng')] }
    ]
  },
  devtool: 'source-map',
  devServer: {
    historyApiFallback: true,
    progress: true
  },
  debug: true
};

When I invoke server with node_modules/.bin/webpack-dev-server --hot --inline, and browse http://localhost:8080/index.html, Hot Module Replacement works, and 'historyApiFallback: true' is honored.

I added gulpfile.js and include the following:

var gulp = require("gulp");
var gutil = require("gulp-util");
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var webpackConfig = require("./webpack.config.js");

gulp.task("webpack-dev-server", function(callback) {
    // modify some webpack config options
    var myConfig = Object.create(webpackConfig);
    myConfig.devtool = "source-map";
    myConfig.debug = true;

    myConfig.entry.unshift(
        "webpack-dev-server/client?http://localhost:8080",
        "webpack/hot/dev-server"
    );

    myConfig.plugins = (myConfig.plugins || []).concat(
        new webpack.HotModuleReplacementPlugin()
    );

    // Start a webpack-dev-server
    new WebpackDevServer(webpack(myConfig), {
        stats: {
            colors: true
        },
        hot: true
    }).listen(8080, "localhost", function(err) {
        if(err) throw new gutil.PluginError("webpack-dev-server", err);
        gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
    });
});

then invoke node_modules/.bin/gulp webpack-dev-server. I got 404 error for http://localhost:8080/dist/bundle.js

So far as I tried, adding

    myConfig.output.path = __dirname;
    myConfig.output.filename = 'dist/bundle.js';

before 'new WebpackDevServer()' to force rewriting path and filename, bundle.js found and Hot Module Replacement begin to work, but it is queer (as document says filename is intended to just a filename), and still 'historyApiFallback: true' is not honored.

Is there a recommended way to achieve this from gulp?

[t246246]

I found I have to set explicitely publicPath, hot and historyApiFallback inside 'new WebpackDevServer()' i.e.

// Start a webpack-dev-server
    new WebpackDevServer(webpack(myConfig), {
        stats: {
            colors: true
        },
        hot: true,
        historyApiFallback: true,
        publicPath: myConfig.output.publicPath  /* '/dist/' */
    }).listen(8080, "localhost", function(err) {
        if(err) throw new gutil.PluginError("webpack-dev-server", err);
        gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
    });

devServer setting in webserver.config.js seems to be ignored here.

[ghost]

same to me now
how did you fixed it?