webpackdevserver에 대한 꿀꺽 꿀꺽 소리를 어떻게 다시 불러 들일 수 있습니까?

Question

나는 webpackdevserver이 꿀꺽에서 livereload 할 수 있도록 노력하고 있습니다 :

gulp.task('watch', function() { 
    gulp.watch(path.ALL, ['sass', 'webpack-dev-server', 'watch']); 
}); 

이 내 webpack.config.js입니다 :

module.exports = { 
    entry: "./app/app.js", 
    output: { 
     path: path.resolve(__dirname, "build"), 
     publicPath: "/dist/", 
     filename: "foss.js", 
     sourceMapFilename: "foss.map" 
    }, 
    devtool: '#source-map', 
    module: { 
     loaders: [{ 
      loader: 'babel', 
      exclude: /node_modules/ 
     }] 
    }, 
    devServer: { inline: true } 

} 

가 어떻게 그것을 livereload 할 꿀꺽 또는 웹팩을 변경할 수 있습니까?

Answer 1

프로젝트 디렉토리에 gulpfile.js 새 파일을 만듭니다.

"use strict"; 

var gulp = require('gulp'); 
var connect = require('gulp-connect'); //Runs a local dev server 
var open = require('gulp-open'); //Open a URL in a web browser 
var browserify = require('browserify'); // Bundles JS 
var reactify = require('reactify'); // Transforms React JSX to JS 
var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp 
var concat = require('gulp-concat'); //Concatenates files 
// var lint = require('gulp-eslint'); //Lint JS files, including JSX 
var babelify = require('babelify'); // support for es6 

var config = { 
port: 9005, 
devBaseUrl: 'http://localhost', 
paths: { 
    html: './src/*.html', 
    js: './src/**/*.js', 
    images: './src/images/*', 
    css: [ 
     'node_modules/bootstrap/dist/css/bootstrap.min.css', 
     'node_modules/bootstrap/dist/css/bootstrap-theme.min.css', 
       './src/css/*.css' 
      ], 
    dist: './dist', 
    mainJs: './src/main.js' 
} 
} 

//Start a local development server 
gulp.task('connect', function() { 
connect.server({ 
    root: ['dist'], 
    port: config.port, 
    base: config.devBaseUrl, 
    livereload: true 
}); 
}); 

gulp.task('open', ['connect'], function() { 
gulp.src('dist/index.html') 
    .pipe(open('', { url: config.devBaseUrl + ':' + config.port + '/'})); 
}); 

gulp.task('html', function() { 
gulp.src(config.paths.html) 
    .pipe(gulp.dest(config.paths.dist)) 
    .pipe(connect.reload()); 
}); 

gulp.task('js', function() { 
browserify(config.paths.mainJs) 

    .transform(reactify) 
    .bundle() 
    .on('error', console.error.bind(console)) 
    .pipe(source('bundle.js')) 
    .pipe(gulp.dest(config.paths.dist + '/scripts')) 
    .pipe(connect.reload()); 
}); 

gulp.task('css', function() { 
gulp.src(config.paths.css) 
    .pipe(concat('bundle.css')) 
    .pipe(gulp.dest(config.paths.dist + '/css')); 
}); 

// Migrates images to dist folder 
// Note that I could even optimize my images here 
gulp.task('images', function() { 
gulp.src(config.paths.images) 
    .pipe(gulp.dest(config.paths.dist + '/images')) 
    .pipe(connect.reload()); 

//publish favicon 
gulp.src('./src/favicon.ico') 
    .pipe(gulp.dest(config.paths.dist)); 
}); 

// gulp.task('lint', function() { 
// return gulp.src(config.paths.js) 
//  .pipe(lint({config: 'eslint.config.json'})) 
//  .pipe(lint.format()); 
// }); 

gulp.task('watch', function() { 
gulp.watch(config.paths.html, ['html']); 
gulp.watch(config.paths.js, ['js']); 
gulp.watch(config.paths.css, ['css']); 
}); 

gulp.task('default', ['html', 'js', 'css', 'images', 'open', 'watch']); 

이 파일을 사용하여 프로젝트를 다시로드하십시오. 자세한 내용은 다음을 참조하십시오. https://github.com/tarangdave/react-starter