[解決済み] Gulp + WebpackかJUST Webpackか？

質問

gulpとwebpackを併用している人を見かけます。 しかし、webpackはgulpを置き換えることができると読みました？ 私はここで完全に混乱しています...誰か説明できますか？

アップデイト

結局、私はgulpから始めました。モダンなフロントエンドは初めてだったので、とにかく早く立ち上げたかったのです。1年以上経って足がかなり濡れたので、webpackに移行する準備ができました。同じ靴で始める人には、同じルートをお勧めします。webpackを試せないとは言いませんが、複雑そうに見えるなら、まずgulpから始めるといいでしょう...何も問題はありません。

gulpが嫌なら、gruntもありますが、package.jsonでコマンドを指定して、タスクランナーなしでコマンドラインから呼び出せば、最初に起動することができます。 例えば、以下のような感じです。

"scripts": {
      "babel": "babel src -d build",
      "browserify": "browserify build/client/app.js -o dist/client/scripts/app.bundle.js",
      "build": "npm run clean && npm run babel && npm run prepare && npm run browserify",
      "clean": "rm -rf build && rm -rf dist",
      "copy:server": "cp build/server.js dist/server.js",
      "copy:index": "cp src/client/index.html dist/client/index.html",
      "copy": "npm run copy:server && npm run copy:index",
      "prepare": "mkdir -p dist/client/scripts/ && npm run copy",
      "start": "node dist/server"
    },

解決方法は？

この回答が参考になるかもしれません。 タスクランナー（Gulp、Gruntなど）とバンドラー（Webpack、Browserify）。なぜ一緒に使うのか？

...そして、gulpタスクの中からwebpackを使用する例です。 これはさらに一歩進んで、webpack の設定が es6 で書かれていると仮定しています。

var gulp = require('gulp');
var webpack = require('webpack');
var gutil = require('gutil');
var babel = require('babel/register');
var config = require(path.join('../..', 'webpack.config.es6.js'));

gulp.task('webpack-es6-test', function(done){
   webpack(config).run(onBuild(done));
});

function onBuild(done) {
    return function(err, stats) {
        if (err) {
            gutil.log('Error', err);
            if (done) {
                done();
            }
        } else {
            Object.keys(stats.compilation.assets).forEach(function(key) {
                gutil.log('Webpack: output ', gutil.colors.green(key));
            });
            gutil.log('Webpack: ', gutil.colors.blue('finished ', stats.compilation.name));
            if (done) {
                done();
            }
        }
    }
}

アプリが複雑になってくると、上記の例のようにgulpとwebpackのタスクを併用した方が良いことが分かると思います。 これにより、webpack ローダーやプラグインではできない、出力ディレクトリの作成、サーバーの起動など、より興味深いことをビルドで実行できるようになります。 まあ、簡潔に言うと、webpackは実際にそういったことができるのですが、長期的なニーズには限りがあると感じるかもしれません。 gulp -> webpackから得られる最大の利点の1つは、様々な環境に応じてwebpackの設定をカスタマイズし、gulpに適切なタスクを適切なタイミングで実行させることができることです。 実際、gulpからwebpackを実行することは何も問題ありません。 面白い の例です。 上の例は、基本的に ロングスター .