WebPack 集成
WebPack 集成
首先我们要消除常见的误解。webpack 是模块打包器(module bundler)(例如, 或 )。它不是任务执行器(task runner)(例如,, 或者 )。任务执行器就是用来化处理常见的开发任务,例如项目的检查(lint)、构建(build)、测试(test)。相对于打包器(bundler),任务执行器则聚焦在偏重上层的问题上面。你可以得益于,使用上层的工具,而将打包部分的问题留给 webpack。
打包器(bundler)帮助你取得准备用于部署的 JavaScript 和样式表,将它们转换为适合浏览器的可用格式。例如,JavaScript 可以压缩、拆分 chunk 和懒加载,以提高。打包是 web 开发中最重要的挑战之一,此问题可以消除开发过程中的大部分痛点。
好消息是,虽然有一些重复,但如果以正确的方式处理,任务运行器和模块打包器能够一起协同工作。本指南提供了关于如何将 webpack 与一些流行的任务运行器集成在一起的高度概述。
NPM Scripts
通常 webpack 使用 npm 来作为任务执行器。这是比较好的开始。然而跨平台是问题,为此有一些案。许多,但不是大多数,直接使用 npm scripts 和各种级别的 webpack 配置和工具,来应对构建任务。
因此,当 webpack 的核心焦点专注于打包时,有多种扩展可以供你使用,可以将其用于任务运行者常见的工作。集成单独的工具会复杂度,所以一定要权衡集成前后的利弊。
Grunt
对于那些使用 Grunt 的人,我们推荐使用 包(package)。使用 grunt-webpack 你可以将 webpack 或 作为一项任务(task)执行,访问中的信息,拆分开发和生产配置等等。如果你还没有安装过 grunt-webpack 和 webpack,请先安装它们:
npm install --save-dev grunt-webpack webpack
然后配置并加载任务:
Gruntfile.js
const webpackCon = require('./webpack.con.js'); module.exports = function(grunt) { grunt.initCon({ webpack: { options: { stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development' }, prod: webpackCon, dev: Object.assign({ watch: true }, webpackCon) } }); grunt.loadNpmTasks('grunt-webpack'); };
更多信息,请查看。
Gulp
在 包(package)(也称作 gulp-webpack) 的帮助下,也可以很简单方便的将 Gulp 与 webpack 集成。种情况下,不需要单独安装 webpack ,因为它是 webpack-stream 直接依赖:
npm install --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({ // 一些配置选项…… })) .pipe(gulp.dest('dist/')); });
更多信息,请查看。
Mocha
可以用来将 Mocha 与 webpack 完全集成。这个仓库提供了很多关于工具优势和缺点方面的细节,但 mocha-webpack 还算是一层简单的封装,提供与 Mocha 几乎相同的 CLI,并提供各种 webpack ,例如改进了 watch 模式和优化了路径分析(path resolution)。这里是如何安装并使用它来运行测试套件的小例子(在 ./test 中找到):
npm install --save-dev webpack mocha mocha-webpack mocha-webpack 'test/**/*.js'
更多信息,请查看。
Karma
包(package)允许你使用 webpack 预处理 中的。它也可以使用 ,并允许传递两者的配置。下面是简单的示例:
npm install --save-dev webpack karma karma-webpack
karma.conf.js
module.exports = function(con) { con.set({ files: [ { pattern: 'test/*_test.js', watched: false }, { pattern: 'test/**/*_test.js', watched: false } ], preprocessors: { 'test/*_test.js': [ 'webpack' ], 'test/**/*_test.js': [ 'webpack' ] }, webpack: { // 一些的 webpack 配置…… }, webpackMiddleware: { // 一些的 webpack-dev-middleware 配置…… } }); };
更多信息,请访问。