Webpack4.0各个击破（10）integration篇

首先咱们要消除一个常见的误解，webpack是一个模块打包工具(module bundler)，它不是一个任务执行工具，任务执行器是用来自动化处理开发中常见任务的，例如检查(lint)，构建(build)，测试(test)等。相对于打包器，任务执行器所面对的逻辑问题更为上层，你可使用上层的工具来管理整个持续集成（CI），而把打包的部分交给webpack。

一. Integration

下文摘自webpack中文网：

首先咱们要消除一个常见的误解，webpack是一个模块打包工具(module bundler)，它不是一个任务执行工具，任务执行器是用来自动化处理开发中常见任务的，例如检查(lint)，构建(build)，测试(test)等。相对于打包器，任务执行器所面对的逻辑问题更为上层，你可使用上层的工具来管理整个持续集成（CI），而把打包的部分交给webpack。

webpack在工具链中的角色定位是很是清晰的，那么为了与其余流程进行合做，就须要使用任务管理工具来启动webpack，本文介绍两种常见的方法。

1. 使用Node-API

webpak暴露了一些方法，使得开发者能够经过调用他们而在脚本中启动webpack，使用的方法较为简单:

//webpack-node.js
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.html.js');
const cowsay = require('cowsay');

const compiler = webpack(webpackConfig);

compiler.run((err, stats)=>{
   if (!err) {
        console.log(stats.toJson().assets);
        console.log(cowsay.say({text:'Congratulations!'}));
   }

});

运行结果：

这里解释一下上面代码的基本逻辑，引入了webpack模块以及webpack.config.html.js的配置文件(从这里就很容易理解为何webpack的配置文件能够导出为一个函数或多个配置，它实际上也是做为一个模块参与到整个运行过程的)，经过调用webpack([Object config])方法获得一个compiler实例，调用compiler.run方法就启动了webpack的构建功能，run方法的回调函数中若是有运行错误，能够经过err来获取，与构建过程有关的信息都挂载在stats对象（例如stats。toJson().assets)。这样便实现了以非命令行的方式启动webpack。

2.使用gulp

gulp是基于流的任务管理工具，实际上webpack的细分功能使用gulp也能够作到，并且不少功能型插件都会提供针对grunt,gulp和webpack等不一样工具的集成方式。gulp的确更适合作宏观意义上的任务流管理，仍是那句老话，工具是提供便利的，而不是提供束缚的。官方文档也提供了以下代码示例：

//gulpfile.js
var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default',function(){
    return gulp.src('src/entry.js')
        .pipe(webpack({
        //...configs
    })).pipe(gulp.dest('dist/'));
})

二. after webpack

至此，webpack已经被集成进了自动化工具链，开发者能够按本身的需求来定制构建之后须要执行的任务，但webpack的使命尚未结束，构建的结束距离用户可以访问站点和使用功能还须要很是多的工做要作，有不少问题并非在构建中出现的，可是却须要在构建时加以处理，这个时候开发者又须要回过头来为webpack增长配置。

例如不少开发者最初不理解构建过程当中为何要使用hash,chunkhash等占位符来把文件名变得丑陋无比，直到不一样版本的产品上线时出现不强制刷新页面就没法访问新资源的问题时，才会开始关注版本更新和缓存策略的问题，而后才会理解为了标记版本而启用hash，为了不重复构建而使用chunkhash,为了减少体积而使用tree-shaking等等。

三. 鸣谢

webpack 系列文章结束了，在这里感谢你们的阅览和支持，若是您以为个人分享对您有帮助，您能够持续关注，我将会继续给你们分享计算机科学方面文章，您若是对什么知识感兴趣或者有疑问，请您留言说明，我会挑一些典型的具体讲解和分享。感谢你们！

做者：大史不说话
连接：Webpack4.0各个击破（10）integration篇来源：博客园著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。