webpack + gulpでホームページを起動できない

Question

初めてWebpackを学習し、プロジェクトを作成しようとしています。 gulpコマンドを実行して、ブラウザにwebpack-dev-serverを自動的に起動して、index.htmlを開きます。また、Webpackのホットリロードを使用して、ブラウザを更新せずに変更されたアセットを読み込みたいと思っています。

webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 

var config = { 
    devtool: 'source-map', 
    entry: [ 
    'webpack-dev-server/client?http://127.0.0.1:9080', 
    'webpack/hot/only-dev-server', 
    './src' 
    ], 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    modulesDirectories: ['node_modules', 'src'], 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'], 
     exclude: /node_modules/ 
    }] 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ] 
}; 

module.exports = config; 

gulpfile.js：私のコードは以下の通りです

var gulp = require('gulp'); 
var webpack = require('webpack'); 
var WebpackDevServer = require('webpack-dev-server'); 
var config = require('./webpack.config.js'); 
var gutil = require('gulp-util'); 

gulp.task("webpack-dev-server", function(callback) { 
    // Start a webpack-dev-server 
    new WebpackDevServer(webpack(config), { 
     hot: true, 
     proxy: { 
      '*': 'http://localhost:5000' 
     }, 
     stats: { 
      colors: true 
     } 
    }).listen(6000, "localhost", function(err) { 
     if(err) throw new gutil.PluginError("webpack-dev-server", err); 
    }); 
}); 

gulp.task('default', ['webpack-dev-server']); 

bundle.jsのWebPACKで正常に作成されますが、ブラウザが開きません。 〜localhost:9080。手動で開くと、Unable to connectと表示されます。また、JSファイルを変更しても、自動的にbundle.jsが再構築されることはありません。私は多くのチュートリアルに従ってきましたが、それを正しく理解することはできません。誰か助けてもらえますか？前もって感謝します！

Answer 1

かなり簡単なシナリオでWebpack with Gulpを使用することをお勧めします。ちょうどWebpackを使用してください。 Gulpと一緒に使用することで、ワークフローや学習の経験が複雑になります。

webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 

var config = { 
    devtool: 'source-map', 
    entry: [ 
    './src' 
    ], 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    modulesDirectories: ['node_modules', 'src'], 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'], 
     exclude: /node_modules/ 
    }] 
    } 
}; 

module.exports = config; 

を次にようDevのサーバーを実行します：代わりに少しそれを打破するために

てみ

のWebPACK-devのサーバー - --hot --inline