为什么我有重新加载页面以便在运行服务器时显示脚本？ （Gulp / Webpack / React）

Question

When I run gulp, everything is compiled into another dist folder. The page automatically loads up but upon loading, the script does display until I reload the page once again. Not sure what the issue is.

Gulpfile

var gulp = require('gulp');
var argv = require('yargs').argv;
var gulpIf = require('gulp-if');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var csscomb = require('gulp-csscomb');
var cssnano = require('gulp-cssnano');
var bourbon = require('node-bourbon').includePaths;
var neat = require('node-neat').includePaths;
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var rename = require('gulp-rename');
var htmlreplace = require('gulp-html-replace');
var runSequence = require('run-sequence');
var sizereport = require('gulp-sizereport');
var htmlmin = require('gulp-html-minifier');
var webpack = require('webpack-stream');


gulp.task('browserSync', function(){
    browserSync({
        server: {
            baseDir: 'dist'
        },
        browser: "google chrome"
    });
});
/* --- WEBPACK --- */
gulp.task('webpack', function() {
  return gulp.src('app/assets/js/main.js')
.pipe(webpack( require('./webpack.config.js') ))
  .pipe(gulpIf(argv.production, uglify()))
  .pipe(gulpIf(argv.production, rename({suffix:'.min'})))
    .pipe(gulp.dest('dist/assets/js/'))
    .pipe(browserSync.reload({stream:true}))
});

/* --- STYLE TASKS--- */
gulp.task('styles',function(){
    return gulp.src('app/assets/scss/**/*.scss')
    .pipe(gulpIf(!argv.production, sourcemaps.init()))
        .pipe(sass({
            includePaths: bourbon,
            includePaths: neat
        }))
        .pipe(csscomb(csscomb.json))
        .pipe(autoprefixer({
            browsers: ['last 3 versions'],
            cascade: false
        }))
        .pipe(gulpIf(argv.production, rename({suffix:'.min'})))
        .pipe(gulpIf(argv.production, cssnano()))
        .pipe(gulpIf(argv.production, sizereport({
            gzip: true
        })))
    .pipe(sourcemaps.write('../maps'))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(browserSync.reload({stream:true}));
});
/*--- HTML ---*/
gulp.task('html', function () {
    return gulp.src('app/*.html')
        .pipe(gulpIf(argv.production, htmlreplace({
        'css': './assets/css/app.min.css',
        'js': './assets/js/main.min.js'
    })))
        .pipe(gulpIf(argv.production, htmlmin({collapseWhitespace: true})))
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.reload({
            stream: true
        }));
});
/* --- Watch Task ---*/
gulp.task ('watch', function(){
    gulp.watch('app/assets/scss/**/*.scss', ['styles']);
    gulp.watch('app/*.html', ['html']);
    gulp.watch('app/assets/img/*', ['images']);
    gulp.watch('app/assets/js/**/*.js', ['webpack']);
});

/* --- IMAGE TASKS ---*/
gulp.task('images', function() {
  return gulp.src('app/assets/img/**/*.+(png|jpg|jpeg|gif|svg)')
    .pipe(cache(imagemin({
      interlaced: true,
      progressive: true
    })))
   .pipe(gulp.dest('./dist/assets/img'))
});
/* --- Font Tasks --- */    
gulp.task('fonts', function () {
    return gulp.src('app/assets/fonts/**/*')
        .pipe(gulp.dest('dist/assets/fonts'))
        .pipe(browserSync.reload({
            stream: true
        }));
});    
/*---- CLEAN TASKS ---*/
gulp.task('clean', function() {
  return del.sync('dist').then(function(cb) {
    return cache.clearAll(cb);
  });
});
gulp.task('clean:dist', function () {
    return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*']);
});
/*--- BUILD TASKS ---*/
gulp.task('default', function(cb) {
  runSequence('clean:dist', 
              ['styles', 'html', 'images', 'fonts', 'webpack', 'browserSync', 'watch'], cb )
});

webpack

module.exports = {

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015'],
            plugins: ['transform-class-properties']
        }
      }
    ]
  },
  output: {
    filename: "main.js"
  }
};

Answer 1

Im not sure why you are using gulp when you can use webpack. I think what you are talking about is react-hot-loader .