Webpack 集成

首先，我們要消除一個(gè)常見的誤解。webpack 是一個(gè)模塊打包工具(module bundler)（例如，Browserify 或 Brunch）。而 不是一個(gè)任務(wù)執(zhí)行工具(task runner)（例如，Make, Grunt 或者 Gulp ）。任務(wù)執(zhí)行工具用來自動(dòng)化處理常見的開發(fā)任務(wù)，例如，lint(代碼檢測)、build(構(gòu)建)、test(測試)。相比模塊打包工具，任務(wù)執(zhí)行工具則聚焦在偏重上層的問題上面。你仍然可以得益于這種用法：使用上層的工具，而將打包部分的問題留給 webpack。

打包工具幫助你取得準(zhǔn)備用于部署的 JavaScript 和 stylesheet，將它們轉(zhuǎn)換為適合瀏覽器的可用格式。例如，可以通過 壓縮、分離 chunk 和 惰性加載 我們的 JavaScript 來提高性能。打包是 web 開發(fā)中最重要的挑戰(zhàn)之一，解決此問題可以消除開發(fā)過程中的大部分痛點(diǎn)。

好的消息是，雖然有一些功能重疊，但是如果使用方式正確，任務(wù)運(yùn)行工具和模塊打包工具還是能夠一起協(xié)同工作。本指南提供了關(guān)于如何將 webpack 與一些流行的任務(wù)運(yùn)行工具集成在一起的高度概述。

NPM Scripts

通常 webpack 用戶使用 npm ?scripts? 來作為任務(wù)執(zhí)行工具。這是比較好的開始。然而跨平臺(tái)支持可能是個(gè)問題，但是有幾種解決方案。許多用戶（但不是大多數(shù)用戶）直接使用 npm scripts 和各種級(jí)別的 webpack 配置和工具。

因此，雖然 webpack 核心重點(diǎn)是打包，但是可以通過各種擴(kuò)展，將它用于任務(wù)運(yùn)行工具的常見工作。集成一個(gè)單獨(dú)的工具會(huì)增加復(fù)雜度，因此在開始前一定要權(quán)衡利弊。

Grunt

對(duì)于那些使用 Grunt 的人，我們推薦使用 ?grunt-webpack? package。使用 ?grunt-webpack? 你可以將 ?webpack? 或 webpack-dev-server 作為一項(xiàng)任務(wù)(task)執(zhí)行，訪問 grunt template tags 中的統(tǒng)計(jì)信息，拆分開發(fā)和生產(chǎn)配置等等。如果還沒有安裝 ?grunt-webpack? 和 ?webpack?，請(qǐng)先安裝它們：

npm install --save-dev grunt-webpack webpack

然后，注冊(cè)一個(gè)配置并加載任務(wù)：

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?） 的幫助下，可以相當(dāng)直接地將 Gulp 與 webpack 集成。在這種情況下，不需要單獨(dú)安裝 ?webpack?，因?yàn)樗?nbsp;?webpack-stream? 直接依賴：

npm install --save-dev webpack-stream

只要將 ?webpack? 替換為 ?require('webpack-stream')?，并傳遞一個(gè)配置：

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 與 webpack 完全集成。這個(gè)倉庫提供了很多關(guān)于其優(yōu)勢和劣勢的細(xì)節(jié)，基本上 ?mocha-webpack? 只是一個(gè)簡單封裝，提供與 Mocha 幾乎相同的 CLI，并提供各種 webpack 功能，例如改進(jìn)了 watch mode 和改進(jìn)了路徑分析。這里是一個(gè)如何安裝并使用它來運(yùn)行測試套件的示例（在 ?./test? 中找到）：

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

Karma

?karma-webpack? package 允許你使用 webpack 預(yù)處理 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'],
  });
};

獲取更多信息，請(qǐng)查看 倉庫。