集成

我们首先来澄清一个常见的误解。Webpack 是一个模块打包器,类似于 BrowserifyBrunch。它*不是*一个任务运行器,不像 MakeGruntGulp。任务运行器处理常见开发任务的自动化,例如项目的代码检查、构建或测试。与打包器相比,任务运行器更侧重于高层级任务。你可以从它们的高层级工具中受益,同时将打包问题留给 webpack 处理。

打包器帮助你准备好 JavaScript 和样式表以便部署,将它们转换为适合浏览器的格式。例如,JavaScript 可以被 压缩分割成多个块懒加载 以提高性能。打包是 Web 开发中最重要的挑战之一,妥善解决它能大大减轻开发过程中的痛苦。

好消息是,尽管存在一些重叠,但如果方法得当,任务运行器和打包器可以很好地协同工作。本指南提供了一个高层次的概述,说明 webpack 如何集成到一些更流行的任务运行器中。

NPM 脚本

通常,webpack 用户会使用 npm scripts 作为他们的任务运行器。这是一个很好的起点。跨平台支持可能会成为一个问题,但有几种变通方法可以解决。许多(如果不是大多数)用户通过 npm scripts 和不同级别的 webpack 配置及工具来完成工作。

因此,尽管 webpack 的核心重点是打包,但它有各种扩展,可以让你将其用于任务运行器典型的作业。集成一个单独的工具会增加复杂性,所以在继续之前务必权衡利弊。

Grunt

对于使用 Grunt 的用户,我们推荐 grunt-webpack 包。使用 grunt-webpack,你可以将 webpack 或 webpack-dev-server 作为任务运行,在 模板标签 中访问统计信息,分割开发和生产配置等等。首先,如果你还没有安装,请安装 grunt-webpackwebpack 本身

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

webpack-stream 包(又名 gulp-webpack)的帮助下,Gulp 的集成也相当直接。在这种情况下,无需单独安装 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'],
  });
};

欲了解更多信息,请访问 仓库

5 贡献者

pksjcebebrawtashianskipjackAnayaDesign