統合

一般的な誤解を解消することから始めましょう。WebpackはBrowserifyやBrunchのようなモジュールバンドラーです。Make、Grunt、Gulpのようなタスクランナーではありません。タスクランナーは、プロジェクトのlint、ビルド、テストなど、一般的な開発タスクの自動化を処理します。バンドラーと比較して、タスクランナーはより高いレベルに焦点を当てています。バンドルに関する問題をwebpackに任せながら、より高レベルのツールからメリットを得ることができます。

バンドラーは、JavaScriptとスタイルシートをブラウザに適した形式に変換することで、デプロイの準備を整えるのに役立ちます。たとえば、JavaScriptは最小化されたり、チャンクに分割されたり、パフォーマンスを向上させるために遅延読み込みされたりすることがあります。バンドルはWeb開発で最も重要な課題の1つであり、それをうまく解決することで、プロセスから多くの苦痛を取り除くことができます。

良いニュースは、重複する部分もありますが、タスクランナーとバンドラーは正しい方法でアプローチすればうまく連携できるということです。このガイドでは、webpackをより一般的なタスクランナーに統合する方法の概要を説明します。

NPMスクリプト

多くの場合、webpackユーザーはnpmのscriptsをタスクランナーとして使用します。これは良い出発点です。クロスプラットフォームのサポートが問題になる可能性がありますが、それに対するいくつかの回避策があります。多くの、あるいはほとんどのユーザーは、npmのscriptsとさまざまなレベルのwebpack設定およびツールでやりくりしています。

したがって、webpackの主な焦点はバンドルですが、タスクランナーに典型的なジョブに使用できるようにするさまざまな拡張機能があります。別のツールを統合すると複雑さが増すため、先に進む前に長所と短所を比較検討してください。

Grunt

Gruntを使用している場合は、grunt-webpackパッケージをお勧めします。grunt-webpackを使用すると、webpackまたはwebpack-dev-serverをタスクとして実行したり、テンプレートタグ内で統計にアクセスしたり、開発構成と本番環境構成を分割したりできます。まだインストールしていない場合は、grunt-webpackとwebpack自体をインストールすることから始めましょう。

npm install --save-dev grunt-webpack webpack

次に、構成を登録し、タスクをロードします。

Gruntfile.js

const webpackConfig = require('./webpack.config.js');

module.exports = function (grunt) {
  grunt.initConfig({
    webpack: {
      options: {
        stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development',
      },
      prod: webpackConfig,
      dev: Object.assign({ watch: true }, webpackConfig),
    },
  });

  grunt.loadNpmTasks('grunt-webpack');
};

詳細については、リポジトリをご覧ください。

Gulp

Gulpも、webpack-streamパッケージ（別名gulp-webpack）の助けを借りて、非常に簡単な統合を実現できます。この場合、webpack-streamの直接の依存関係であるため、webpackを個別にインストールする必要はありません。

npm install --save-dev webpack-stream

webpackの代わりにrequire('webpack-stream')を使用し、オプションで構成を渡すことができます。

gulpfile.js

const gulp = require('gulp');
const webpack = require('webpack-stream');
gulp.task('default', function () {
  return gulp
    .src('src/entry.js')
    .pipe(
      webpack({
        // Any configuration options...
      })
    )
    .pipe(gulp.dest('dist/'));
});

詳細については、リポジトリをご覧ください。

Mocha

mocha-webpackユーティリティは、Mochaとのクリーンな統合に使用できます。リポジトリでは長所と短所に関する詳細を提供していますが、基本的にmocha-webpackはMocha自体とほぼ同じCLIを提供する単純なラッパーであり、改善されたウォッチモードや改善されたパス解決などのさまざまなwebpack機能を提供します。以下に、インストール方法とそれを使用してテストスイート（./test内にある）を実行する方法の小さな例を示します。

npm install --save-dev webpack mocha mocha-webpack
mocha-webpack 'test/**/*.js'

詳細については、リポジトリをご覧ください。

Karma

karma-webpackパッケージを使用すると、webpackを使用してKarmaでファイルをプリプロセスできます。

npm install --save-dev webpack karma karma-webpack

karma.conf.js

module.exports = function (config) {
  config.set({
    frameworks: ['webpack'],
    files: [
      { pattern: 'test/*_test.js', watched: false },
      { pattern: 'test/**/*_test.js', watched: false },
    ],
    preprocessors: {
      'test/*_test.js': ['webpack'],
      'test/**/*_test.js': ['webpack'],
    },
    webpack: {
      // Any custom webpack configuration...
    },
    plugins: ['karma-webpack'],
  });
};

詳細については、リポジトリをご覧ください。