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

[ghost]

webpack.config.js

  var path = require("path");
  module.exports = {
    entry: './src/app.ts',
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.js",
      publicPath: '/dist/'
    },
    devtool: "source-map",
    resolve: {
      // Add `.ts` and `.tsx` as a resolvable extension.
      extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    },
    module: {
      loaders: [
        // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
        {
          test: /\.tsx?$/,
          loader: 'ts-loader'
        }
      ],
      preLoaders: [{
        test: /\.js$/,
        loader: "source-map-loader"
      }]
    }
  }

gulp task

import gulp from 'gulp';
import gutil from 'gutil';
import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import webpackConfig from '../webpack.dev.config.js';

gulp.task("webpack-dev-server", function(callback) {
  var myConfig = Object.create(webpackConfig);
  myConfig.devtool = "eval";
  myConfig.debug = true;
  myConfig.output.path = __dirname;
  myConfig.output.filename = 'dist/bundle.js';
  // 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");
  });
});

wehen run gulp webpack-dev-server no error but cannot fount bundle.js

cmd output:

➜  gulp-webpack git:(master) ✗ gulp webpack-dev-server
[12:00:18] Requiring external module babel-register
[12:00:19] Using gulpfile ~/code_repositories/git/Coding/gulp-webpack/gulpfile.babel.js
[12:00:19] Starting 'webpack-dev-server'...
[webpack-dev-server] : http://localhost:8080/webpack-dev-server/index.html
ts-loader: Using [email protected] and /Users/admin/code_repositories/git/Coding/gulp-webpack/tsconfig.json
Hash: e54fc54ee6598ab27cca
Version: webpack 1.13.2
Time: 1399ms
          Asset     Size  Chunks             Chunk Names
    bundleww.js  1.68 kB       0  [emitted]  main
bundleww.js.map  1.81 kB       0  [emitted]  main
chunk    {0} bundleww.js, bundleww.js.map (main) 151 bytes [rendered]
    [0] ./src/app.ts 151 bytes {0} [built]
webpack: bundle is now VALID.

[SpaceK33z]

What exactly are you trying to do here? The bundle should be available under http://localhost:8080/dist/bundle.js, have you tried that?

Also, as the issue template said, please ask those kind of questions on Stack Overflow. You'll get better help there.

[ghost]

after run gulp webpack-dev-server

cannot fount bundle.js in my workdir and http://localhost:8080/dist/bundle.js return 404

[SpaceK33z]

webpack-dev-server will not put your bundle.js in your workdir, it will compile your files in-memory. I just now notice that you have commented out this part:

// publicPath: myConfig.output.publicPath /* '/dist/' */

Can you try changing that to publicPath: '/dist/'?

[ghost]

thanks ,
it is my fault.
http://localhost:8080/bundle.js it is work.

[ghost]

thanks ,

“webpack-dev-server will not put your bundle.js in your workdir, it will compile your files in-memory”

notice myself

[LeTranAnhVu]

Hi. So how can we make the bundle show up in disk instead build in memory? Any suggestion?

[craigmiller160]

Webpack Dev Server won't ever put the bundle on disk. It's not supposed to. Use the normal webpack production build to accomplish this.

[glekner]

@LeTranAnhVu
writeToDisk: true