整合

讓我們先釐清一個常見的誤解。Webpack 是一個模組打包器，例如 Browserify 或 Brunch。它不是一個任務執行器，例如 Make、Grunt 或 Gulp。任務執行器處理常見開發任務的自動化，例如檢查、建置或測試您的專案。與打包器相比，任務執行器具有較高層級的重點。您仍然可以受益於它們的高層級工具，同時將打包問題交給 webpack。

打包器可協助您準備 JavaScript 和樣式表以進行部署，將它們轉換成適合瀏覽器的格式。例如，JavaScript 可以 縮小 或 分割成區塊，並 延遲載入 以提升效能。打包是網頁開發中最重要的挑戰之一，妥善解決它可以大幅減少流程中的痛苦。

好消息是，儘管有些重疊，但如果以正確的方式進行，任務執行器和打包器可以很好地協同運作。本指南提供 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，因為它是 webpack-stream 的直接相依性

npm install --save-dev webpack-stream

您可以 require('webpack-stream') 取代 webpack，並選擇性地傳遞設定給它

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'],
  });
};

如需了解更多資訊，請參閱 儲存庫。