找不到bundle.js（**与webpack无关）

Question

I keep getting a 404 error on my bundle.js file. I have been googling, reading, and trying everything I can for hours to figure it out, but I haven't found a solution to help me. I get the following error in my browser (Chrome)

"Failed to load resource: the server responded with a status of 404 http://localhost:3000/bundle.js (NOT FOUND)"

Here is my gulpfile.babel.js:

import gulp from 'gulp';
import babelify from 'babelify';
import browserify from 'browserify';
import source from 'vinyl-source-stream';
import browserSync from 'browser-sync';
import less from 'gulp-less';
import ghPages from 'gh-pages';
import gutil from 'gulp-util';
import fs from 'fs';

const sync = browserSync.create();

gulp.task('html', () => {
  gulp.src('src/**/*.html')
    .pipe(gulp.dest('dist'))
    .pipe(sync.reload({
      stream: true
    }));
});

gulp.task('json', () => {
  gulp.src('src/**/*.json')
    .pipe(gulp.dest('dist'))
    .pipe(sync.reload({
      stream: true
    }));
});

gulp.task('script', () => {
  browserify().transform(babelify.configure({
  presets: ["es2015", "react"] }))
    .bundle()
    .pipe(fs.createWriteStream("bundle.js"))
});

gulp.task('styles', ['fonts'], () => {
  gulp.src('src/styles/**/*.{css,less}')
    .pipe(less()
      .on('error', (error) => {
        gutil.log(gutil.colors.red('Error: ' + error.message));
        gutil.beep();
      }))
    .pipe(gulp.dest('dist'))
    .pipe(sync.reload({
      stream: true
    }));
});

// Fonts
gulp.task('fonts', () => {
  gulp.src('node_modules/font-awesome/fonts/*')
    .pipe(gulp.dest('dist/fonts/'));
});

gulp.task('build', ['html', 'script', 'styles', 'json']);

gulp.task("deploy", ["build"], () => {
  ghPages.publish("dist");
});

gulp.task('serve', ['build'], () => {
  sync.init({
    server: 'dist',
  });

  gulp.watch('src/**/*.html', ['html']);
  gulp.watch('src/**/*.json', ['json']);
  gulp.watch('src/**/*.{css,less}', ['styles']);
  gulp.watch('src/**/*.{js,jsx}', ['script'])
});

gulp.task('default', ['serve']);

My package.json

{
  "private": true,
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "browser-sync": "^2.10.1",
    "browserify": "^12.0.1",
    "fs": "0.0.2",
    "gh-pages": "^0.8.0",
    "gulp": "^3.9.0",
    "gulp-less": "^3.0.5",
    "gulp-util": "^3.0.7",
    "react": "^0.14.3",
    "vinyl-source-stream": "^1.1.0",
    "webpack": "^1.12.9"
  },
  "dependencies": {
    "backbone": "^1.2.3",
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.5.0",
    "jquery": "^2.1.4",
    "parse": "^1.6.13",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "underscore": "^1.8.3"
  }
}

My index.html has the following at the bottom of the body:

    <script type="text/javascript" src="bundle.js"></script>

Also, I have a .babelrc set up with the es2015 and react presets

Thanks in advance for any feedback!

UPDATE SOLVED:

gulp.task('script', () => {
  browserify().transform(babelify.configure({
  presets: ["es2015", "react"] }))
    .bundle()
    .pipe(fs.createWriteStream("dist/bundle.js"))
});

Had to add - dist/ - to the last line

Answer 1

Do you have multiple web servers running? For instance on port 3000 and port 80? And if so, is bundle.js placed in the correct web folder?

Could a .htaccess file or similar be blocking access to bundle.js?

If you create a random file ( test.html ), can you then access it from http://localhost:3000/test.html ?