集成

首先，我们来澄清一个常见的误解。Webpack 是一个模块打包器（module bundler），类似于 Browserify 或 Brunch。它不是像 Make、Grunt 或 Gulp 那样的任务运行器（task runner）。任务运行器负责自动化处理常见的开发任务，例如代码检查（linting）、构建或测试项目。与打包器相比，任务运行器的关注点更高一层。你仍然可以从它们更高级别的工具中受益，同时将打包问题交给 webpack。

打包器帮助你准备好用于部署的 JavaScript 和样式表，将它们转换为适合浏览器运行的格式。例如，JavaScript 可以被压缩或拆分为代码块（chunks），并通过懒加载来提升性能。打包是 Web 开发中最重要的挑战之一，做好打包可以消除开发过程中的诸多痛点。

好消息是，尽管任务运行器和打包器之间存在一些重叠，但只要方法得当，它们可以很好地协同工作。本指南将从较高层面概述如何将 webpack 集成到一些流行的任务运行器中。

NPM Scripts

通常，webpack 用户会使用 npm 的 scripts 作为任务运行器。这是一个很好的起点。跨平台支持可能会成为一个问题，但有几种解决方案可以应对。许多（甚至可以说大多数）用户通过 npm scripts 结合不同层次的 webpack 配置和工具来满足需求。

因此，虽然 webpack 的核心关注点是打包，但有许多扩展可以让你将其用于任务运行器所擅长的那些工作。集成一个单独的工具会增加复杂性，所以在继续之前请务必权衡利弊。

Grunt

对于使用 Grunt 的用户，我们推荐使用 grunt-webpack 包。使用 grunt-webpack，你可以将 webpack 或 webpack-dev-server 作为任务运行，在模板标签中访问统计信息（stats），拆分开发和生产配置等等。首先，安装 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: { watch: true, ...webpackConfig },
    },
  });

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

如需了解更多信息，请访问该仓库。

Gulp

借助 webpack-stream 包（也称为 gulp-webpack），Gulp 的集成也相当简单。在这种情况下，无需单独安装 webpack，因为它是 webpack-stream 的直接依赖项：

npm install --save-dev webpack-stream

你可以使用 require('webpack-stream') 来替代 webpack，并可以选择性地传入配置参数：

gulpfile.js

import gulp from "gulp";
import webpack from "webpack-stream";

gulp.task("default", () =>
  gulp
    .src("src/entry.js")
    .pipe(
      webpack({
        // 任何配置选项...
      }),
    )
    .pipe(gulp.dest("dist/")),
);

如需了解更多信息，请访问该仓库。

Mocha

mocha-webpack 工具可用于与 Mocha 进行干净的集成。该仓库提供了关于其优缺点更详细的说明，但本质上 mocha-webpack 是一个简单的封装，它提供了几乎与 Mocha 本身相同的 CLI，并提供了各种 webpack 功能，例如改进的监视模式（watch mode）和改进的路径解析。以下是一个关于如何安装并使用它来运行测试套件（位于 ./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

export default 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: {
      // 任何自定义 webpack 配置...
    },
    plugins: ["karma-webpack"],
  });
}

如需了解更多信息，请访问该仓库。