集成

让我们先澄清一个常见的误解。Webpack 是一个模块打包器，就像 Browserify 或 Brunch。它不是一个任务运行器，就像 Make、Grunt 或 Gulp。任务运行器处理诸如 linting、构建或测试项目等常见开发任务的自动化。与打包器相比，任务运行器具有更高级别的关注点。您仍然可以从它们的高级工具中获益，同时将打包问题留给 webpack。

打包器可以帮助您准备好 JavaScript 和样式表以进行部署，将它们转换为适合浏览器的格式。例如，JavaScript 可以被 压缩 或 拆分为块 并 延迟加载 以提高性能。打包是 Web 开发中最重要的问题之一，很好地解决它可以消除该过程中的很多痛苦。

好消息是，虽然有一些重叠，但如果以正确的方式进行，任务运行器和打包器可以很好地协同工作。本指南提供了有关如何将 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 包，您可以在 Karma 中使用 webpack 预处理文件。

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

有关更多信息，请访问 仓库。