question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 typescript@2.0.3 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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

18reactions
SpaceK33zcommented, Oct 11, 2016

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/'?

8reactions
ghostcommented, Oct 11, 2016

thanks ,

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

notice myself

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot start webpack-dev-server with gulp
You should set output.path as an absolute directory and it will work. module.exports = { entry: './main.js', output: { path: __dirname + '/' ......
Read more >
How I solved and debugged my Webpack issue through ...
I want it to point to a file Hello.js and not to a bundled file, ... And it turned out that the webpack-dev-server...
Read more >
Moving from Gulp to Webpack - Richard Oliver Bray
resolve` the we refer to the root directory with `__dirname` and we export our processed code to a file called `dist`. 7. `filename:...
Read more >
Webpack — What is it and is it better than Gulp?
When Webpack came out, people were very careful to not call it a build process. ... When we run webpack on the command-line,...
Read more >
Caching
So we're using webpack to bundle our modular application which yields a ... However, if we were to run it again, we may...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found