集成 | Integrations

Integrations

首先我们要消除一个常见的误解。webpack 是一个模块打包器(module bundler)（例如，Browserify 或 Brunch）。它不是一个任务执行器(task runner)（例如，Make, Grunt 或者 Gulp ）。任务执行器就是用来自动化处理常见的开发任务，例如项目的检查(lint)、构建(build)、测试(test)。相对于打包器(bundler)，任务执行器则聚焦在偏重上层的问题上面。你可以得益于，使用上层的工具，而将打包部分的问题留给 webpack。

打包器(bundler)帮助你取得准备用于部署的 JavaScript 和样式表，将它们转换为适合浏览器的可用格式。例如，JavaScript 可以压缩、拆分 chunk 和懒加载，以提高性能。打包是 web 开发中最重要的挑战之一，解决此问题可以消除开发过程中的大部分痛点。

好消息是，虽然有一些功能重复，但如果以正确的方式处理，任务运行器和模块打包器能够一起协同工作。本指南提供了关于如何将 webpack 与一些流行的任务运行器集成在一起的高度概述。

NPM脚本

通常 webpack 用户使用 npm scripts 来作为任务执行器。这是比较好的开始。然而跨平台支持是一个问题，为此有一些解决方案。许多用户，但不是大多数用户，直接使用 npm scripts 和各种级别的 webpack 配置和工具，来应对构建任务。

因此，当 webpack 的核心焦点专注于打包时，有多种扩展可以供你使用，可以将其用于任务运行者常见的工作。集成一个单独的工具会增加复杂度，所以一定要权衡集成前后的利弊。

Grunt

对于那些使用 Grunt 的人，我们推荐使用 grunt-webpack 包(package)。使用 grunt-webpack 你可以将 webpack 或 webpack-dev-server 作为一项任务(task)执行，访问模板标签(template tags)中的统计信息，拆分开发和生产配置等等。如果你还没有安装过 grunt-webpack 和 webpack，请先安装它们：

npm i --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

在 webpack-stream 包(package)（也称作 gulp-webpack） 的帮助下，也可以很简单方便的将 Gulp 与 webpack 集成。在这种情况下，不需要单独安装 webpack ，因为它是 webpack-stream 直接依赖：

npm i --save-dev webpack-stream

只需要把 webpack 替换为 require('webpack-stream')，并传递一个配置文件就可以了：

gulpfile.js

var gulp = require('gulp'
var 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 与 webpack 完全集成。这个仓库提供了很多关于工具优势和缺点方面的细节，但 mocha-webpack 还算是一层简单的封装，提供与 Mocha 几乎相同的 CLI，并提供各种 webpack 功能，例如改进了 watch 模式和优化了路径分析(path resolution)。这里是一个如何安装并使用它来运行测试套件的小例子（在 ./test 中找到）：

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

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

Karma

karma-webpack 包(package)允许你使用 webpack 预处理 Karma 中的文件。它也可以使用 webpack-dev-middleware，并允许传递两者的配置。下面是一个简单的示例：

npm i --save-dev webpack karma karma-webpack

karma.conf.js

module.exports = function(config) {
  config.set{
    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...
    },
    webpackMiddleware: {
      // Any custom webpack-dev-middleware configuration...
    }
  }
};

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